0

我正在使用下面的代码来显示/隐藏导航及其子项。它按预期工作。当导航显示时，我单击其中一个子链接，它会关闭，然后将我带到一个新页面。

 // swap classes for lower level nav
  jQuery('.toggle').click(function() {
  $(this).toggleClass('toggle');
  $(this).toggleClass('toggle_open');
 });

 jQuery('a.portfolio').click(function(e) {
  e.preventDefault();
 });

Safari 不会这样做，但 Chrome 和 Firefox 会显示上述行为。当我观察检查员打开时发生的事情时；我单击父链接，应用切换类，单击子链接，切换类被交换回来。

在将我带到请求的页面之前，如何阻止导航关闭？

我的标记（对于导航来说非常规 - 我知道）：

<span class="toggle">
 <a href="portfolio/" class="level1 portfolio">Portfolio</a>
   <span>
     <a href="portfolio/item1/" class="first level2">item 1</a>
     <a href="portfolio/item2/" class="level2">item 2</a>
     <a href="portfolio/item3/" class="last level2">item 3</a>
   </span>   
</span>
4

2 回答 2

1

您应该添加e.stopPropagation()到 all<a>的点击处理程序，并删除e. preventDefault()这将阻止您进入新页面。

试试这个代码：

jQuery('.toggle').click(function() {
  $(this).toggleClass('toggle');
  $(this).toggleClass('toggle_open');
 });

 jQuery('.toggle a.level2').click(function(e) {
    e.stopPropagation();
 });
于 2013-02-01T17:05:15.727 回答
0

尽量e.stopPropagation()避免调用额外的事件处理程序。您可能需要更改事件处理程序的顺序。

于 2013-02-01T16:50:46.460 回答