Javascript jQuery切换-应仅在单击标题时关闭_Javascript_Jquery_Html_Toggle

Javascript jQuery切换-应仅在单击标题时关闭

javascript jquery html

Javascript jQuery切换-应仅在单击标题时关闭,javascript,jquery,html,toggle,Javascript,Jquery,Html,Toggle,小提琴：情景：我想在选项卡式容器中使用嵌套切换，就像在小提琴中一样我的问题：当我单击主切换（“切换1”）或（“切换2”）时，将显示内部内容。但如果我点击里面的任何东西，它就会关闭。例如，如果我单击切换2，如果我单击选项卡1->嵌套切换1，切换2本身将关闭我希望它保持开放我猜：如果单击了与切换相关的任何内容（甚至文本内容），JQuery工作将关闭切换我的需要：我只想在单击这些矩形标题时关闭切换另外，如果您能以这样的方式帮助清理代码，我不需要编写单独的JS来使内部嵌套切换独立于

小提琴：

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

我的问题：当我单击主切换（“切换1”）或（“切换2”）时，将显示内部内容。但如果我点击里面的任何东西，它就会关闭。例如，如果我单击切换2，如果我单击选项卡1->嵌套切换1，切换2本身将关闭

我希望它保持开放

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

我的需要：我只想在单击这些矩形标题时关闭切换

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

目前，我为示例中的两个切换编写了两个Toggle 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');       
    }       
});

另外，我还没有写JS代码，我正在使用某人的模板

谢谢！：）

使用

event.stopPropagation（）

我已经更新了JSFIDLE

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

使用

event.stopPropagation（）

我已经更新了JSFIDLE

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

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

之所以会发生这种情况，是因为每当您单击

li

元素（包括其他切换元素：

.toggle2

）中的任意一个元素时，切换当前都会激活

因此，解决方案是使其仅在单击

.toggle

h6

元素时激活切换，并将

$（this）.子项（…）

更改为

$（this）.同级（…）

您可以按原样使用以下内容（与

切换

和

切换L2

中的更改相同）：

或

只需使用第一部分

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

并将

html

中的所有

.t2

、

.toggle2

等重命名为与第一个相同的名称（即

.t2

变为

.t

）