jQuery的切換 - 應關閉只在點擊標題

小提琴：http://jsfiddle.net/bscn3/jQuery的切換 - 應關閉只在點擊標題

方案：我想使用嵌套的內部切換標籤的容器，如小提琴。

我的問題：當我點擊Main Toggle（「Toggle 1」）或（「Toggle 2」）時，顯示內部內容。但是，如果我點擊裏面的東西，它會關閉。例如。如果我點擊切換2，並且如果我點擊選項卡1 - >嵌套切換1，則切換2本身關閉。

我希望它保持開放。

我的猜測：如果點擊與Toggle（偶數文本內容）相關的任何內容，JQuery工作將關閉切換。

我的需求：我希望切換隻在點擊那些矩形標題時關閉。另外，如果你能以這種方式幫助清理代碼，那麼我不需要編寫單獨的JS來使內部嵌套切換獨立於它的父級或子級切換工作，這將非常棒。

目前我在示例中爲兩個切換書寫了兩個切換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代碼，我正在使用某人的模板。

謝謝！ :)

來源

2013-08-07 Nirav Zaveri

嘗試不應用切換綁定到'li'元素，而是將它添加到'h6'，其切換的原因是因爲當你點擊任何地方在li元素內部它再次觸發切換事件。 –

沒錯！代碼的答案由@Steven給出。哇，我開始喜歡使用jQuery！ –

似乎是一個非常簡單的解決方案...

，它的發生是因爲撥動當前激活，只要你點擊內部幹啥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');  
     }  
    });

只需使用F IRST節...

//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）

來源

2013-08-07 10:21:06 Steven

這實際上是我對整個問題的完整解決方案！ –

很高興爲您效力！ :) – Steven

使用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-07 10:04:41

正在解決的主要問題的解決方案。謝謝你的一樣。但我真的希望它不要關閉點擊李元素內的任何東西！但我已經知道這個stopPropagation（）;功能從你，非常感謝！ –

jQuery的切換 - 應關閉只在點擊標題

回答

相關問題