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元素的可见性。或者更好的是，用div替换图像，并使用toggleClass()更改的背景图像。

使用javascript onclick下拉菜单进行图像交换

2 个答案: