Question

我从帮助者那里获得了这些代码：

$(document).ready(function(expanded) {
    var listItems = $('li.playerContainer');
    listItems.data("collapsed", true);
    $(listItems).click(function() {
        reset(this);
        var collapsed = $(this).data("collapsed");
        if (collapsed) {
            $(this).stop(true, true).animate({
                width: "450px",
                height: "500px"
            }).data("collapsed", false);
            $(this).children(".playerInfoR").addClass("rightAppear");
            $(this).children(".player_nameR").css({visibility:"hidden"});
            $(this).children(".closeR").addClass("rightAppear");
            $(this).children(".playerAchievesR").addClass("rightAppear");
        } else {
            $(this).stop(true, true).animate({
                width: "210px",
                height: "100px"
            }).data("collapsed", true);
            $(this).children(".playerInfoR").removeClass("rightAppear");
            $(this).children(".player_nameR").css({visibility:"visible"});
            $(this).children(".closeR").removeClass("rightAppear");
            $(this).children(".playerAchievesR").removeClass("rightAppear");
        };

        return false;
    });

    function reset(clicked) {
        $(listItems).not(clicked).stop(true, true).animate({
            width: "210px",
            height: "100px"
        }).data("collapsed", true);
        $(".playerInfoR").removeClass("rightAppear");
        $(".player_nameR").css({visibility:"visible"});
        $(".closeR").removeClass("rightAppear");
        $(".playerAchievesR").removeClass("rightAppear");
        return false;
    };

    $(".events").click(function(){

        $("events").load("http://www.yahoo.com");

    });

});

它的作用是，在“li”项之间，单击一个以“宽度和高度”展开，然后再次单击将其重置为默认值。

现在我想在“li”中添加另一个按钮，点击并在另一个页面中加载div。不幸的是，每当我点击那个按钮时，它的作用就像我只是点击了“li”本身，所以它只是给出了效果，即使我只想点击并进入另一个网站，该按钮也无法工作。我该怎么做才能让它自己点击。

请在网站上查看＆gt;＆gt;＆gt; SiteTest

Answer 1

如果您想要阻止li展开，点击该按钮会冒出您需要致电li的{{1}}，或者我认为您可以检查并查看该元素是否被点击了实际上是event.stopPropagation()检查li。

暂停事件冒泡：

event.target

检查元素：

$('.events').click(function(e){
   e.stopPropagation();
   // if you are using <a> tags for this you probably also
   // want to do e.preventDefault();

   $("#events").load("http://www.yahoo.com");
   return false;

});

Answer 2

如果我确实找到了你，那么你可以做一些像这样的事情，它会为click事件添加一个事件处理程序，并阻止事件冒泡

$('li.playerContainer #mybutton').click(function(event) {
    // do your stuff / loading page etc.

    // stop event from bubbling, so that your default li-handling will not take place
    event.stopPropagation();
}

JQuery - 添加嵌套标记

2 个答案: