切换子菜单，如果孩子点击，转到页面

Toggle submenu and if child clicked go to page

本文关键字：孩子 菜单 如果      更新时间：2023-09-26

我构建了一个简单的切换菜单，单击一次会显示子元素列表，如果再次单击则会隐藏那些可见元素。

如果一个子元素被点击了，但我希望它只访问那个页面，我似乎无法让它工作？这与我防止违约有关吗？

//  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

为什么不简单地转换段落标记中的主菜单元素？或者你可以在你的主菜单元素里放一个#，然后删除阻止默认值。通过这种方式，您不需要在主要元素上阻止默认值。

虽然谷歌网站不会在iFrame中加载，但你可以检查一下这个小提琴。它有效。

看看这个（锚中有#）小提琴

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>

在代码之前添加此行

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

删除

e.preventDefault();

这应该很好

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

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

希望能有所帮助。

这里查看这个。

解释。

我没有在整个li上委派事件，而是将事件绑定到li的所有直接<a>子级，然后阻止该特定元素的传播。因此，我们不必弄清楚如何停止向children元素传播事件（在本例中为click）。

此外，JSFiddle可能存在加载外部iframe的问题，请在此处查看解决方案。

我认为您必须在内部列表项中添加stopPropagation。

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

相关文章：