使父菜單鏈接切換子菜單鏈接

我有一個菜單，我工作正常，但我需要一個小的更改，這是我需要父菜單切換子菜單，目前如果您單擊父菜單子菜單出現，但我需要它，所以當你再次點擊父菜單時，它會關閉子菜單。使父菜單鏈接切換子菜單鏈接

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

使父菜單鏈接切換子菜單鏈接

回答

相關問題