Сделать ссылку подменю link для основного меню

Question

У меня есть меню, в котором я работаю нормально, но мне нужно небольшое изменение, и мне нужно, чтобы родительское меню переключилось подменю, в настоящее время, если вы нажмете родительское меню, появится подменю, но я это нужно, когда вы снова нажимаете на родительское меню, оно закрывает подменю.

Вы можете увидеть меню в действии 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> 

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>