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

Posted 2023-03-06

【中文标题】切换子菜单，如果孩子点击转到页面

【英文标题】：Toggle submenu and if child clicked go to page

【发布时间】：2016-04-07 22:24:45

【问题描述】：

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

如果单击了子元素，但我希望它仅访问该页面，我似乎无法使其正常工作？是不是和我的prevent Default有关？

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

【问题讨论】：

我认为您的代码运行良好。究竟是什么问题？

@DarrenSweeney 他提供了小提琴。

如果您点击英语，然后尝试点击国际，您应该会被带到 Google.com @void...

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

错过了@void - 谢谢

【参考方案1】：

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

虽然 google.com 不会在 iFrame 中加载，但您可以检查一下这个小提琴。它有效。

看看这个（在锚点中有#）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，我不能将空锚更改为 p 标签，尽管我很害怕所以必须使用提供的标记...

嗯好的，所以在 A 标记内放一个 #...您可以将类添加到这些元素并仅阻止该类的默认值。我会修改我的小提琴。

【参考方案2】：

在这里检查This 。

说明。

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

另外，JSFiddle 可能有加载外部iframe 的问题，请查看here 的解决方案。

【参考方案3】：

在你的代码前添加这一行

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

删除

e.preventDefault();

这应该可以正常工作

【参考方案4】：

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

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>

Working Fiddle

希望对你有帮助。

【参考方案5】：

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

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