[英]My clickable jQuery drop-down menu does not work
我已经使用JQuery制作了一个可点击的下拉菜单。
下拉菜单必须像这样工作:
1)'a'下拉开关单击,'a'下拉菜单可见
2)not('a'下拉开关和'a'下拉菜单)=== dropdownMenu隐藏
3)setTimeOut是需要的(我真的代码是动画CSS)
我想要多个下拉菜单。
a,b,c,d ...和“ Z”
但是我的下拉菜单出现了这个问题:
1)下拉切换点击,b下拉切换点击===后,一个下拉菜单不隐藏
2)但此代码不包含document.closeset(我想包含dropdownToggle.click(function()<<<
我该如何解决这个问题? 任何帮助将不胜感激。
$(function(){ body = $('body'); /* dropdown */ var dropdown = $('.dropdown'), dropdownToggle = dropdown.find('.toggle'), dropdownMenu = dropdown.find('.menu'), checkDropdownOpen = 'close'; dropdownToggle.click(function() { $(this).each(function() { // setInitial var thisDropdown = $(this).parent('.dropdown'), thisDropdownToggle = $(this), thisDropdownMenu = $(this).next('.menu'); // checkDropdownMenu = open if (!thisDropdownMenu.hasClass('open') && (thisDropdownMenu.attr('aria-hidden') === 'true' || thisDropdownMenu.attr('aria-hidden') === undefined)) { // visible setTimeout(function() { checkDropdownOpen = 'open'; thisDropdownMenu.addClass('open'); }, 10); // attr change setTimeout(function() { thisDropdownMenu.attr('aria-hidden', 'false'); }, 218); } else if (thisDropdownMenu.hasClass('open') && thisDropdownMenu.attr('aria-hidden') === 'false') { // visible setTimeout(function() { checkDropdownOpen = 'close'; thisDropdownMenu.removeClass('open'); }, 10); // attr change setTimeout(function() { thisDropdownMenu.attr('aria-hidden', 'true'); }, 218); } }) }); /* dropdownClose() */ function dropdownClose() { // toggle dropdownMenu.removeClass('open'); // hidden, attr change setTimeout(function() { body.removeClass('account-open'); dropdownMenu.attr('aria-hidden', 'true'); }, 218); } /* document click */ $(document).click(function(e) { // dropdown if (!$(e.target).closest(dropdown).length) { dropdownClose(); } }); });
.dropdown .menu { display: none; } .dropdown .menu.open { display:block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown"> <button class="toggle">button</button> <div class="menu">article</div> </div> <div class="dropdown"> <button class="toggle">button</button> <div class="menu">article</div> </div>
使用现有代码,您可以添加以下行:
dropdownClose();
这些行之间:
dropdownToggle.click(function() {
$(this).each(function() {
这将在打开目标同级菜单之前关闭整个菜单。
另一种执行相同操作的方式:
$( document ).ready(function() {
$('.toggle').on('click', function() {
$('.menu').hide(250);
$(this).next().show(500);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.