Question

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

 // 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和＆amp; 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>

Answer 1

您应该将e.stopPropagation()添加到所有<a>的点击处理程序，然后移除e. preventDefault()，这会阻止您转到新页面。

试试这段代码：

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

 jQuery('.toggle a.level2').click(function(e) {
    e.stopPropagation();
 });

Answer 2

尝试e.stopPropagation()以阻止调用其他事件处理程序。您可能需要更改事件处理程序的顺序。

如何在单击链接时停止切换脚本结束？

2 个答案: