0

所以我得到了这个有图像的代码，当你点击它时，会出现一个下拉菜单。很简单。该代码工作正常，但我试图在点击时合并图像交换，但我遇到了困难。这是 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").empty(); 这样的行 然后 ("dt").html("new_image") 但它会导致下拉功能停止工作。有人有什么想法吗？

4

2 回答 2

1

我在 JSFiddle 创建了代码。只需检查这是否是您希望它的行为方式：

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

于 2012-08-30T15:55:32.610 回答
1

我认为您会想要更新图像的 src 属性-

您可以像这样在下拉列表中找到图像：

$('.dropdown dt img')

然后更新 src 属性

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

我怀疑您会希望在 click 函数中使用它，如下所示：

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

请注意，如果您希望它打开/关闭，您可以通过检查检查ul元素的可见性.is(':visible')。或者更好的是，用 div 替换图像，并使用用toggleClass().

于 2012-08-30T15:58:59.440 回答