使用javascript onclick下拉菜單進行圖像交換

Question

所以我有這個有圖像的代碼，當你點擊它時會出現一個下拉菜單。 很簡單。 代碼工作正常，但我試圖在點擊上加入圖像交換，我有困難。 這是HTML和JS（也有一些CSS，但我會把它留下來）：

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 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();
});
});

我嘗試添加像（“dt”）這樣的行.flash（）; 然后（“dt”）。html（“new_image”）但它會導致下拉功能停止工作。 任何想法？

Answer 1

我在JSFiddle創建了代碼。 只需檢查這是否是您希望它的行為方式：

http://jsfiddle.net/3L3At/2/

Answer 2

我想你會想要更新圖像的src屬性 -

你可以在下拉列表中找到這樣的圖像：

$('.dropdown dt img')

然后更新src屬性

$('.dropdown dt img').attr('src', '/newimage.jpg');

我懷疑你會在點擊功能中想要這樣：

$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
    $('.dropdown dt img').attr('src', '/newimage.jpg');
});  

請注意，如果要打開/關閉它，可以使用.is(':visible')檢查來檢查ul元素的.is(':visible') 。 或者更好的是，用div替換圖像，並使用用toggleClass()更改的背景圖像。