制作父菜单链接切换子菜单链接答案

【问题标题】：Make parent menu link toggle submenu link制作父菜单链接切换子菜单链接
【发布时间】：2017-02-19 12:27:12
【问题描述】：

我有一个运行良好的菜单，但我需要做一点小改动，那就是我需要父菜单来切换子菜单，目前如果您单击父菜单，则会出现子菜单，但我需要它，所以当您单击父菜单再次关闭子菜单。

您可以看到正在运行的菜单here。

这是用于菜单的 javascript：

$('.dropdown-toggle').click(function() {
  $('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
  $(this).next('.dropdown').toggle();
});

$(document).click(function(e) {
  var target = e.target;
  if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
    $('.dropdown').hide();
  }
});

这是菜单html

<nav class="main">

    <a class="dropdown-toggle" href="#" title="Menu">Menu One</a>

    <ul class="dropdown">
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Search</a></li>
    </ul>

</nav>

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

替换此代码：

$('.dropdown-toggle').click(function() {
  $('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
  $(this).next('.dropdown').toggle();
});

使用下面的代码：

 $('.dropdown-toggle').click(function() {

    var $currentDropdown = $(this).next('.dropdown');

    $currentDropdown.siblings('.dropdown').not($currentDropdown).removeClass('toggled');
    $currentDropdown.siblings('.dropdown').not($currentDropdown).hide();

    $currentDropdown.toggleClass('toggled');
    $currentDropdown.toggle();

});

应该可以的。

【讨论】：

谢谢，这正是我想要的。

【解决方案2】：

我认为这是更简单的方法:) 希望对您有所帮助

$(".dropdown").css('display', 'none');

$('.dropdown-toggle').click(function(e) {
  if ($(this).next().is(":visible")){
    $(this).next().hide();
  }else{
    $(".dropdown").hide();
    $(this).next().show();
  }
});

a {
  display: block;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script><nav class="main">
<nav>
    <a class="dropdown-toggle" href="#" title="Menu">Menu One</a>

    <ul class="dropdown">
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Search</a></li>
    </ul>
  
   <a class="dropdown-toggle" href="#" title="Menu">Menu One</a>

    <ul class="dropdown">
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Search</a></li>
    </ul>
  </nav>

【讨论】：

【解决方案3】：

我认为这段代码就足够了。

$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown').toggle();
});

Codepen Example

【讨论】：

这有我想要的切换效果但是当你现在看时 [(foley13.webfactional.com/sotl)] 当你点击每个父菜单时它只是切换子菜单，我需要它所以菜单一切换菜单 1 子菜单和菜单两个切换子菜单 2 等