Question

我附加了点击li时正确定位的内容。我的代码很好地工作，虽然它不断添加图像到页面，因为我没有删除li切换时。有什么想法吗？

$("#offering li").click(function() {                             
            $(this).find("ul").animate({height: "toggle"}, 500);
            $(this).append('<img width="286" height="15" class="offeringselected" alt="Selected" src="images/bg-offering-li-selected.png">');
            $(this).toggleClass('current');
    });

Answer 1

您可以使用the .toggle() event method，将两个函数传递给点击。

$("#offering li").toggle(function() {                             
        $(this).find("ul").animate({height: "toggle"}, 500);
        $(this).addClass('current')
               .append('<img width="286" height="15" class="offeringselected" alt="Selected" src="images/bg-offering-li-selected.png">');
},function() {                             
        $(this).removeClass('current')
               .children('img.offeringselected').remove();
});

或者最好将图像放在来自服务器的页面中，然后只显示并隐藏它。

为此，您可以使用执行显示/隐藏的the other version of .toggle()。

$("#offering li").click(function() {                             
        $(this).find("ul").animate({height: "toggle"}, 500);
        $(this).toggleClass('current')
               .children('img.offeringselected').toggle(); // show/hide the img
});

将图像硬编码到<li>中，并在CSS中为其初始化display:none。

在切换上附加和删除图像

1 个答案: