如何使slideToggle僅在第一個元素單擊時工作？

我有一個嵌套的元素設置這樣一個簡單的側邊欄導航菜單：如何使slideToggle僅在第一個元素單擊時工作？

<ul> 
<li id="nav-Heading1">Heading 1 
    <ul id="nav-Expanded"> 
    <li>Heading 2 
    <ul> 
    <li><a href="link1">Link 1</a></li> 
    <li><a href="link2">Link 2</a></li> 
    <li><a href="link3">Link 3</a></li> 
    </ul> 
    </li> 
    </ul> 
</li> 
</ul>

所有我想要做的是有一個的slideToggle（）設置，使被點擊＃NAV-標題1時，該ID爲UL ＃nav-展開的幻燈片向下或向上。

如果＃nav-Expanded ul是可見的，那麼您應該能夠點擊鏈接並轉到網站上的正確頁面。相反，由於某種原因，slideToggle（）被應用於所有元素，所以當你點擊鏈接時，整個＃nav-Expanded ul消失。我無法理解爲什麼它這樣做。這是我的JQuery：

$(document).ready(function() { 
    $("#nav-Heading1 ul#nav-Expanded").hide(); //hides the Expanded nav initially 
    $('#nav-Heading1').click(function(e) { 
      $("#nav-Heading1 ul#nav-Expanded").slideToggle("fast"); 
    }); 
});

更新時間：這是我JFiddle http://jsfiddle.net/vPb5V/3/

來源

2013-12-23 volume one

，它的發生是因爲上的鏈接的點擊次數冒泡和觸發外部列表上單擊事件。

地址：

$('#nav-Heading2 a').click(function(e){e.stopPropagation();})

到你的代碼停止。

jsFiddle example

編號：http://api.jquery.com/event.stopPropagation/

來源

2013-12-23 14:39:03 j08691

非常感謝，它的工作小號！現在我有另一個問題。點擊鏈接後，它會轉到正確的頁面，但導航不會「展開」。它由於最初的hide（）而再次隱藏。我將如何繼續打開它，直到用戶再次點擊＃nav-Heading1爲止？ –

如果您不想在頁面加載時隱藏菜單，請刪除'$（「＃nav-Heading1 ul＃nav-Expanded」）。hide（）;'。但是，這顯然會讓任何人進入頁面。您可能需要使用cookie或其他方法來跟蹤您的使用情況（點擊或新增點擊），然後根據是否新建應用'.hide（）'。 – j08691

我用這段代碼得到了一些奇怪的效果。基本上，當我點擊一個鏈接，它會進入頁面，但'擴展'的ul笨拙，好像它試圖滑動但不能。 –

由於您的UL是nav-Heading1孩子，就可以點擊將在nav-Heading1點擊。

嘗試檢查中，UL您切換前點擊：

if (!$(e.target).closest('#nav-Heading2').length) $("#nav-Heading1 ul#nav-Heading2").slideToggle("fast");

來源

2013-12-23 14:39:40

謝謝你的幫助，聖誕快樂！ –

1.方法 的問題是，裏面#nav-Heading1所有元素將被綁定到該事件。爲了防止event bubbling使用下列內容：

$(document).ready(function() { 
    $("#nav-Heading1 ul#nav-Heading2").hide(); //hides the heading2 nav initially 
    $('#nav-Heading1 > span').click(function(e){ 
     $("#nav-Heading1 ul#nav-Heading2").slideToggle("fast"); 
    }); 
    $("#nav-Heading2 a").click(function(e){ 
     e.stopPropagation(); 
    }); 
});

2.方法

包裹＃NAV-標題1的點擊部分：

<ul id="nav-Heading1"> 
<li><span>Heading 1</span> 
    <ul id="nav-Heading2"> 
    <li>Heading 2 
    <ul> 
    <li><a href="link1">Link 1</a></li> 
    <li><a href="link2">Link 2</a></li> 
    <li><a href="link3">Link 3</a></li> 
    </ul> 
    </li> 
    </ul> 
</li> 
</ul>

而且現在委託事件跨度：

$(document).ready(function() { 
    $("#nav-Heading1 ul#nav-Heading2").hide(); //hides the heading2 nav initially 
    $('#nav-Heading1 > span').click(function(e){ 
     $("#nav-Heading1 ul#nav-Heading2").slideToggle("fast"); 
    }); 
});

來源

2013-12-23 14:41:21 enyce12

謝謝你的幫助，聖誕快樂！ –

如何使slideToggle僅在第一個元素單擊時工作？

回答

相關問題