如何啓用jQuery的toggle（）方法中的<a>的點擊事件？

我有一個樹形菜單。來自此菜單的最後一個<li>元素包含一個<a>元素。如何啓用jQuery的toggle（）方法中的<a>的點擊事件？

我正在使用jQuery toggle()方法。

我知道toggle()默認包含e.preventDefault()。

我想要做的是將單擊事件返回到<a>元素。

你能幫忙嗎？

HTML：

<ul class="menu"> 
    <li> 
     Item1 
     <ul style="display: none"> 
      <li> 
       subItem1 
       <ul style="display: none"> 
        <li> 
         <a href="http://www.google.com">Google</a> 
        </li> 
        <li> 
         <a href="http://www.yahoo.com">Yahoo</a> 
        </li> 
        <li> 
         <a href="http://www.facebook.com">Facebook</a> 
        </li>  
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

的Javascript：

$(".menu li").toggle(
    function() { 
     $(this).children().slideDown(); 
    }, 

    function() { 
     $(this).children().slideUp(); 
    } 
);

請檢查此琴：http://jsfiddle.net/fzy48/

來源

2013-03-13 Rodrigo Abib

你有沒有試過這個問題的建議？ ... http://stackoverflow.com/questions/1551389/how-to-enable-default-after-event-preventdefault – Jodes 2013-03-13 10:10:37

你都錯過了一些關閉標籤。

查看updated fiddle。

$(".menu li").on('click', function(e) { 
    e.stopPropagation(); 
    $(this).children('ul').slideToggle(); 
});

使用on()方法你必須在你的功能更多的控制。您需要的是stopPropagation()方法：它可以防止點擊事件將dom樹冒泡到父項li，這會滑動切換它。

此外，通過過濾被點擊的li的孩子只有ul的你更清楚你想要切換。

來源

2013-03-13 10:15:43 Flauwekeul

很好解釋答案，+1 :-) – Nelson 2013-03-13 10:26:17

你的解決方案工作得很好！ TKS！ =） – 2013-03-13 19:33:23

的替代版本，以Flauwekeul的一個，使用.on()事件委派：

$('.menu').on('click', 'li', function(event){ 
    if (event.target != this) { 
    return;//dont want bubbled up events 
    } 
    $(event.target).children('ul').slideToggle(); 
});

看到它在http://jsfiddle.net/fzy48/5/

使用事件代表團的好處是，我們只是附加一個事件處理程序（父.menu元素），而不是每個li元素的一個事件處理程序。

來源

2013-03-13 10:25:12 Nelson

如何啓用jQuery的toggle（）方法中的<a>的點擊事件？

回答

相關問題