使父菜单链接切换子菜单链接

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

您可以在操作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>

来源

2017-02-19 Duggy G

替换此代码：

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

});

应该这样做。

来源

2017-02-19 13:37:07

谢谢，这正是我想要的。 –

我觉得这个代码就足够了。

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

Codepen Example

来源

2017-02-19 12:53:34 amansoni211

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

谢谢，工作 –

我想这是simplier方式:) 希望你帮

$(".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>

来源

2017-02-19 13:06:33 Tomma5o

使父菜单链接切换子菜单链接

回答

相关问题