1

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

场景：我想在选项卡式容器中使用嵌套切换，就像在小提琴中一样。

我的问题：当我单击主切换（“切换 1”）或（“切换 2”）时，会显示内部内容。但如果我点击里面的任何东西，它就会关闭。例如。如果我单击 Toggle 2，并且单击 Tab 1 -> Nested Toggle 1，则 Toggle 2 本身会关闭。

我希望它保持开放。

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

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

此外，如果您可以帮助清理代码，我不需要编写单独的 JS 来使内部嵌套的切换独立于其父或子切换工作，那就太好了。

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

//切换

$('.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');       
    }       
});

//切换 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');       
    }       
});

PS我还没有编写JS代码，我正在使用某人的模板。

谢谢！:)

4

2 回答 2

3

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

发生这种情况是因为当您单击元素内部的任何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重命名为与第一个相同（即变为）.toggle2html.t2.t

于 2013-08-07T10:21:06.460 回答
1

采用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');       
    }       
});
于 2013-08-07T10:04:41.273 回答