點擊JQuery導航樹打開/關閉

我不是JQuery或JavaScript專家，我的網站導航沒有問題。我的導航看起來像典型的Windows資源管理導航如：點擊JQuery導航樹打開/關閉

Title 
    subtitle 
    subtitle 
     subsubtile 
    subtitle 
Title 
    subtitle

我想它的工作原理是一樣的典型的Windows資源管理導航，當我點擊標題字幕將能夠看到，當我reclick標題是隱藏點擊的標題字幕。

通過以下代碼，我可以打開標題，但不知道如何關閉它們。

$(document).ready(function() { 
    $('#navigation').click(function() { 
     $('#navigation ul li:hover').children('#navigation ul li ul').slideDown(400); 
    }); 
})

來源

2013-05-02 qwauk

首先你需要知道如何關閉它們，有很多方法可以做到這一點。 – 2013-05-02 14:50:18

嘗試在mouseout上使用slideUp功能 – 2013-05-02 14:55:15

有jQuery中方便的速記：.slideToggle()

，如果它是目前還沒有和VICA，反之亦然選定的元素將被顯示。

另一個重要部分是，您可以在事件處理程序中使用$(this)。這是事件處理的要素。

另外.children()是tree traversal函數。這意味着它的結果將根據所選元素進行選擇。因此$('#example').children('a')將選擇直接在示例元素下的所有鏈接，因此不需要$('#example').children('#example a')。

我已經包裹你的代碼了：

$(document).ready(function() { 
    $('#navigation ul li').click(function(e) { 
     e.stopPropagation(); 
     $(this).children('ul').slideToggle(400); 
    }); 
});

或者，如果您願意讓1個事件處理程序和冒泡：

$(function() { 
    $('#navigation').on('click', 'li', function(e) { 
     e.stopPropagation(); 
     $(this).children('ul').slideToggle(400); 
    }); 
});

當然這兩個只有當<ul>您切換工作是您觸發點擊事件的<li>的直接子女。

編輯：因爲事件冒泡的單擊事件的

正如在評論中提到@thebreiflabb，將在默認情況下，點擊的元素的每一位家長被解僱。

如果任何父母也匹配選擇器，則會調用相同的事件處理函數。

e.stopPropagation()告訴，事件在這裏被處理，它不需要在父元素上觸發。

要查看「子項目2」的區別點擊「項目4」下，在這兩個小提琴的：

With stopping propagation.

Without stopping propagation.

正如你所看到的，沒有stopPropagation() 「項目4」也關閉。

來源

2013-05-02 14:56:49 SoonDead

是的，這是有效的，但由於子子級別等原因，只有一個小的增加。您需要停止傳播以不關閉較高級的項目。 HTTP：//的jsfiddle。net/mtCyS/ – thebreiflabb 2013-05-02 15:06:17

所以如此。謝謝。 – SoonDead 2013-05-02 15:08:04

我也在你的小提琴中加入了我的答案。 – SoonDead 2013-05-02 15:21:09

點擊JQuery導航樹打開/關閉

回答

相關問題