0

我有以下问题：一旦单击一个列表项，一个 div 向上滑动并将不透明度更改为 1。我的目标是在第二次单击时，相同的 div 将获得不透明度 0。

我尝试删除原始类并添加一个新类“已选择”，然后对其应用点击事件。由于某种原因，第二部分不起作用。有任何想法吗？ 

$(document).ready(function () {
    $('li.slide1').click(function () {
        $("div#slidebox1").animate({
            opacity: .8,
            top: -200,

        }, 300);

        $("li.slide1").removeClass("slide1").addClass("selected");

    });

    $("li.selected").click(function () {

        $("div#slidebox1").animate({
            opacity: 0,

        }, 300);

    });
});
4

2 回答 2

0 
$("ul").on("click", "li.selected", function () {
   $("div#slidebox1").animate({ opacity:0},300);
});

用于on()委派您处理第二次点击。

您当前的代码正在设置两个click处理程序document.ready()- 但由于li' 没有类selected但它们没有应用程序处理程序。Usingon()将处理程序设置为ul，它捕获冒泡的单击事件，并检查它的目标是否是li.selected并调用您的函数。

此外，正如 gdoron 在下面建议的那样，您可以在第一个函数中包含绑定处理程序callback。

$('li.slide1').click(function () {
    $("div#slidebox1").animate({
        opacity: .8,
        top: -200
    }, 300, function(){
         $(this).one("click", function(){
            $("div#slidebox1").animate({opacity:0}, 300);
         });
    });

    $("li.slide1").removeClass("slide1").addClass("selected");
});
于 2012-06-06T22:52:00.273 回答
0

您必须对 jQuery 1.7+ 或 .live() jQuery 1.3+ 使用 .on() ，因为当用户单击 li.slide1 时添加了“selected”类，并且它以前不存在。

$(document).ready(function () {
    $('li.slide1').live('click',function () {
        $("div#slidebox1").animate({ opacity: .8, top: -200 }, 300);
        $(this).removeClass("slide1").addClass("selected");
    });

    $("li.selected").live('click', function () {
        $("div#slidebox1").animate({ opacity: 0 }, 300);
    });
});
于 2012-06-06T23:09:39.373 回答