Question

小提琴：http://jsfiddle.net/bscn3/

方案：我想在标签容器中使用嵌套切换，就像在小提琴中一样。

我的问题：当我点击Main Toggle（“Toggle 1”）或（“Toggle 2”）时，显示内部内容。但如果我点击里面的任何东西它就会关闭。对于Eg。如果我点击切换2，如果我点击标签1 - ＆gt;嵌套切换1，切换2本身关闭。

我希望它保持开放。

我的猜测：如果点击与切换（偶数文本内容）相关的任何内容，JQuery工作将关闭切换。

我的需要：我希望Toggle仅在单击这些矩形标题时关闭。

另外，如果您可以帮助以这种方式清理代码，那么我不需要编写单独的JS来使内部嵌套Toggles独立于其父或子切换工作，它会很棒。

目前我在示例中为两个切换编写了两个Toggle JS函数。

// TOGGLE

$('.toggle-view li').click(function () {
    var text = $(this).children('.t');

    if (text.is(':hidden')) {
        text.slideDown('fast');
        $(this).children('.toggle').addClass('tactive');      
    } else {
        text.slideUp('fast');
        $(this).children('.toggle').removeClass('tactive');       
    }       
});

// TOGGLE L2

$('.toggle-view2 li').click(function () {
    var text2 = $(this).children('.t2');

    if (text2.is(':hidden')) {
        text2.slideDown('fast');
        $(this).children('.toggle2').addClass('tactive2');      
    } else {
        text2.slideUp('fast');
        $(this).children('.toggle2').removeClass('tactive2');       
    }       
});

P.S。我没有编写JS代码，我正在使用某人的模板。

谢谢！：）

Answer 1

似乎是一个非常简单的解决方案...

这种情况正在发生，因为只要您点击li元素内部的任何内容（包括其他切换元素：.toggle2），切换就会激活。

因此，解决方案是仅在点击.toggle / h6元素并将$(this).children(...)更改为$(this).siblings(...)

时激活切换

您可以使用以下内容（TOGGLE和TOGGLE L2中的相同更改）：

//TOGGLE
    $('.toggle-view li .toggle').click(function () { // Changed selector
        var text = $(this).siblings('.t'); // Changed to .siblings(...)

        if (text.is(':hidden')) {
            text.slideDown('fast');
            $(this).addClass('tactive'); // Removed .children(...)
        } else {
            text.slideUp('fast');
            $(this).removeClass('tactive'); // Removed .children(...)
        }       
    }); 
//TOGGLE L2
    $('.toggle-view2 li .toggle2').click(function () {
        var text2 = $(this).siblings('.t2');

        if (text2.is(':hidden')) {
            text2.slideDown('fast');
            $(this).addClass('tactive2');      
        } else {
            text2.slideUp('fast');
            $(this).removeClass('tactive2');       
        }       
    });

或

只需使用第一部分......

//TOGGLE $('.toggle-view li .toggle').click(function () { var text = $(this).siblings('.t'); if (text.is(':hidden')) { text.slideDown('fast'); $(this).addClass('tactive'); } else { text.slideUp('fast'); $(this).removeClass('tactive'); } });

并将.t2中的所有.toggle2，html等重命名为与第一个相同（即.t2变为.t）< / p>

Answer 2

使用event.stopPropagation()

我更新了jsfiddle

$('.toggle-view2 li').click(function (event) {
event.stopPropagation();
    var text2 = $(this).children('.t2');

    if (text2.is(':hidden')) {
        text2.slideDown('fast');
        $(this).children('.toggle2').addClass('tactive2');      
    } else {
        text2.slideUp('fast');
        $(this).children('.toggle2').removeClass('tactive2');       
    }       
});

jQuery Toggle - 只应在单击标题时关闭

2 个答案: