切换子菜单，如果单击子菜单项，则转到页面。

Question

我已经建立了一个简单的切换菜单，点击一次显示子元素列表，再次点击隐藏这些可见元素。

然而，如果单击子元素，则希望仅访问该页面，但似乎无法使其工作？是否与我的阻止默认有关？

//  Language select in global nav
$('.sub-lang').on('click', function(e) {

if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) {
    $(this).removeClass('active');
    $(this).css('height', 'auto');
    $(this).children('ul').hide();
} else {
    $(this).addClass('active');
    $(this).css('height', $(this).find('ul').height() + 65);
    $(this).children('ul').show();
}

e.preventDefault();
});

这里是 JsFiddle。

- Liam

---

我认为你的代码运行良好。问题具体是什么？ - void

他提供了小提琴。 - void

如果您点击英语，然后尝试点击国际选项，应该会跳转到Google.com @void... - Liam

但是google.com设置了一些请求头，这些请求头不允许您在任何iframe中打开google.com。 - gurvinder372

错过了 @void - 谢谢 - StudioTime

是的，你的问题在于 preventDefault。尝试从你的代码中移除 e.preventdefault 并将 href="#" 添加到你的链接中。我已经在 fiddle 中尝试过了，它会起作用的。 - Dhiraj

Answer 1

在这里检查这个。

解释。

我绑定了事件到所有直接的<a>子元素，而不是委托整个li上的事件，然后阻止该特定元素的传播。因此，我们不必想出如何停止事件传播（在我们的情况下为click）到子元素。

此外，JSFiddle可能会有加载外部iframe的问题，所以请在这里检查解决方案。

- Mohd Abdul Mujib

Answer 2

我认为你需要在内部列表项中添加 stopPropagation。

$('.sub-lang ul li').on('click', function(e) {
  e.stopPropagation();
});

- patki

Answer 3

为什么不将主菜单元素转换为段落标签呢？ 或者您可以在主菜单元素中放置一个#，并删除prevent default。 这样，您就不需要在主要元素上防止默认操作。

虽然google.com无法在iFrame中加载，但您可以检查此fiddle。它有效。

看看这个（在锚点中使用#）fiddle HTML

<ul style=" ">
  <li class="sub-lang">
    <a href="#">English</a>
    <ul style="">
      <li><a href="http://www.google.com">International</a></li>
      <li><a href="">UK &amp; Ireland</a></li>
    </ul>
  </li>
  <li class="sub-lang">
    <a href="#">Espanol</a>
    <ul style="">
      <li><a href="/es-es/">Español</a></li>
      <li><a href="http://www.google.com">España</a></li>
    </ul>
  </li>
  <li class="sub-lang">
    <a href="#">Francais</a>
    <ul style="">
      <li><a href="/fr-fr/">Français</a></li>
      <li><a href="http://www.google.com">France</a></li>
    </ul>
  </li>
</ul>

- Gianca

---

谢谢@Gianca，我恐怕不能将空锚点更改为p标签，所以必须使用提供的标记工作... - Liam

嗯，好的，所以在A标签里面加一个#号...或者只针对那些元素而不是其他元素阻止默认行为。你可以给这些元素添加类，并仅针对该类阻止默认行为。我会修改我的fiddle。 - Gianca

Answer 4

在你的代码前面添加这行：

$('.sub-lang > a').removeAttr('href');

移除

e.preventDefault();

这应该可以很好地工作

- Sahal Tariq

Answer 5

你应该为此添加一个条件。

if($(e.target).parent().hasClass('sub-lang') )

这将允许您点击子菜单。

//  Language select in global nav
$('.sub-lang').on('click', function(e) {
  
 if($(e.target).parent().hasClass('sub-lang') ){
 
    if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) {
      $(this).removeClass('active');
      $(this).css('height', 'auto');
      $(this).children('ul').hide();
    } else {
      $(this).addClass('active');
      $(this).css('height', $(this).find('ul').height() + 65);
      $(this).children('ul').show();
    }
    e.preventDefault();
  }
});

ul li ul {
    display: none;
    z-index: 2;
    right: 0;
    background-color: #fff;
    width: 250px;
}
ul li.active ul {
    display: block;
    text-align:left;
    background: #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style=" ">
  <li class="sub-lang">
    <a href="">English</a>
    <ul style="">

      <li><a href="http://www.google.com" traget="_blank">International</a></li>

      <li><a href="">UK &amp; Ireland</a></li>

    </ul>
  </li>

 
  <li class="sub-lang">
    <a href="/es-es/">Español</a>
    <ul style="">

      <li><a href="http://www.google.com">España</a></li>

    </ul>
  </li>

  <li class="sub-lang">
    <a href="/fr-fr/">Français</a>
    <ul style="">

      <li><a href="http://www.google.com">France</a></li>

    </ul>
  </li>

</ul>

工作的Fiddle

希望它有所帮助。

- ketan