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

Image swap with a javascript onclick dropdown menu

本文关键字：图像 交换 下拉菜单 javascript onclick 使用      更新时间：2023-09-26

所以我得到了这个代码，它有一个图像，当你点击它时，会出现一个下拉菜单。很简单。代码运行良好，但我正在尝试在点击时加入图像交换，我遇到了困难。这是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"），但这会导致下拉功能停止工作。有什么想法吗？

我想您会想要更新图像的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()的背景图像。

我已经在JSFiddle上创建了代码。只要检查一下你是否希望它这样表现：

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

相关文章：