Image swap with a javascript onclick dropdown menu

Posted by AzzyDude on Stack Overflow See other posts from Stack Overflow or by AzzyDude
Published on 2012-08-30T15:32:11Z Indexed on 2012/08/30 15:38 UTC
Read the original article Hit count: 223

Filed under:
|
|
|
|

So I've got this code that has an image and when you click it a dropdown menu appears. Pretty simple. The code works fine but I'm trying to incorporate an image swap on click and I'm having difficulty. Here's the HTML and the JS (there's some CSS too, but I'll leave that out):

HTML:

<div id="header">
  <dl class="dropdown">
    <dt><a href="#"><img src="images/cogwheel_btn.png"/></a></dt>
    <dd>
    <ul>
        <li><a href="#">Favorites</a></li>
        <li><a href="#">History</a></li>
    </ul>
    </dd>
  </dl>
</div>

JS:

$(document).ready(function() {
    $(".dropdown img.flag").addClass("flagvisibility");
    $(".dropdown dt a").click(function() {
        $(".dropdown dd ul").toggle();
    });
    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        $(".dropdown dt a span").html(text);
        $(".dropdown dd ul").hide();
        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }
    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
    });
    $("#flagSwitcher").click(function() {
        $(".dropdown img.flag").toggleClass("flagvisibility");
    });
});?

I've tried adding lines like ("dt").empty(); and then ("dt").html("new_image") but it causes the dropdown functionality to stop working. Anyone any ideas?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery