親メニューリンクのトグルサブメニューリンクの作成

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

私は、これは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>