Question

我有一个菜单，我工作正常，但我需要一个小的更改，这是我需要父菜单切换子菜单，目前，如果你单击父菜单子菜单出现，但我需要它，所以当你点击父菜单再次关闭子菜单。

您可以在操作here中看到菜单。

这是菜单的javascript：

bootstrap js

这是菜单html

$('.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();
  }
});

Answer 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();

});

应该这样做。

Answer 2

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

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

Codepen Example

Answer 3

我认为这是更简单的方式:) 希望你帮忙

$(".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 个答案: