单击第二个下拉列表时，黑框应保持可见
Posted
技术标签:
【中文标题】单击第二个下拉列表时，黑框应保持可见【英文标题】：When click on second dropdown black box should remain visible 【发布时间】：2018-11-04 13:15:38 【问题描述】：在我正在构建的这个下拉导航中，如果打开了一个下拉菜单并且您单击打开第二个下拉菜单，那么黑框应该保持可见。目前，当您单击第二个下拉菜单时，黑框会消失，并在下拉菜单完全打开后重新出现。
更新
我还注意到打开下拉菜单后会显示黑框，并且它应该同时打开。
我希望这是有道理的，感谢您的帮助！
$(document).ready(function()
$(".click").on("click", function(e)
var menu = $(this);
toggleDropDown(menu);
);
$(document).on('mouseup',function(e)
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function()
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active'))
$('a.active').removeClass('active');
);
);
);
function toggleDropDown(menu)
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function()
$(".main-container").removeClass("black-bg");
if (menu.hasClass('active'))
menu.removeClass('active');
else
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function()
$(".main-container").addClass("black-bg");
);
);
if (!isActive)
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function()
$(".main-container").addClass("black-bg");
);
*
box-sizing: border-box;
body
margin: 0;
.nav-wrapper
width: 100%;
overflow: hidden;
background: #424242;
nav
width: 1024px;
margin: auto;
overflow: hidden;
background: #424242;
.nav-content
width: 100%;
z-index: 999;
background: #ccc;
.top-bar-section
float: left;
.top-bar-section a.active
background: #f00;
.showup
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 70px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
p
font-size: 14px;
line-height: 1.4;
li.nav-item
display: inline-block;
background: #f5f5f5;
li.nav-item a
display: block;
text-decoration: none;
padding: 10px;
.main-container
width: 80%;
height: 400px;
margin: auto;
.black-bg
background: #000;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
<a href="#" class="click">Nav item 1</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 2</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 3</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 4</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>【问题讨论】：
.main-container 元素始终可见。黑色背景消失/重新出现的唯一原因是您删除了 black-bg 类，然后再次添加它。如果您不想改变背景，请停止与该类混淆。
当然，但是当您在导航外部或同一个导航按钮中单击时，我需要关闭黑框
【参考方案1】：
如果您希望在单击菜单后添加black-bg，则不要在每个单击事件上删除并添加black-bg 类。如果菜单有active 类，只需添加一次，当菜单没有active 类时删除它。如果您在每个点击事件上删除并添加类，那么black-bg 将首先消失，然后再次出现。在下拉菜单打开时到black-bg，然后从slideDown()的回调函数中删除$(".main-container").addClass("black-bg");，因为在当前效果完成后会执行一个回调函数。
$(document).ready(function()
$(".click").on("click", function(e)
var menu = $(this);
toggleDropDown(menu);
);
$(document).on('mouseup',function(e)
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function()
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active'))
$('a.active').removeClass('active');
);
);
);
function toggleDropDown(menu)
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function()
if (menu.hasClass('active'))
menu.removeClass('active');
$(".main-container").removeClass("black-bg");
else
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function()
);
);
if (!isActive)
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500);
$(".main-container").addClass("black-bg");
*
box-sizing: border-box;
body
margin: 0;
.nav-wrapper
width: 100%;
overflow: hidden;
background: #424242;
nav
width: 1024px;
margin: auto;
overflow: hidden;
background: #424242;
.nav-content
width: 100%;
z-index: 999;
background: #ccc;
.top-bar-section
float: left;
.top-bar-section a.active
background: #f00;
.showup
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 70px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
p
font-size: 14px;
line-height: 1.4;
li.nav-item
display: inline-block;
background: #f5f5f5;
li.nav-item a
display: block;
text-decoration: none;
padding: 10px;
.main-container
width: 80%;
height: 400px;
margin: auto;
.black-bg
background: #000;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
<a href="#" class="click">Nav item 1</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 2</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 3</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 4</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>【讨论】：
【参考方案2】：只需将$(".main-container").removeClass("black-bg"); 移动到if (menu.hasClass('active'))
$(document).ready(function()
$(".click").on("click", function(e)
var menu = $(this);
toggleDropDown(menu);
);
$(document).on('mouseup',function(e)
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function()
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active'))
$('a.active').removeClass('active');
);
);
);
function toggleDropDown(menu)
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function()
//$(".main-container").removeClass("black-bg"); FROM HERE
if (menu.hasClass('active'))
menu.removeClass('active');
$(".main-container").removeClass("black-bg"); // TO HERE
else
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function()
$(".main-container").addClass("black-bg");
);
);
if (!isActive)
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function()
$(".main-container").addClass("black-bg");
);
*
box-sizing: border-box;
body
margin: 0;
.nav-wrapper
width: 100%;
overflow: hidden;
background: #424242;
nav
width: 1024px;
margin: auto;
overflow: hidden;
background: #424242;
.nav-content
width: 100%;
z-index: 999;
background: #ccc;
.top-bar-section
float: left;
.top-bar-section a.active
background: #f00;
.showup
display: none;
background: #ccc;
position: absolute;
width: 100%;
top: 70px;
left: 0;
z-index: 99;
padding: 30px 15px 30px 20px;
p
font-size: 14px;
line-height: 1.4;
li.nav-item
display: inline-block;
background: #f5f5f5;
li.nav-item a
display: block;
text-decoration: none;
padding: 10px;
.main-container
width: 80%;
height: 400px;
margin: auto;
.black-bg
background: #000;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<div class="top-bar-section">
<ul>
<li class="nav-item">
<a href="#" class="click">Nav item 1</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 1.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 2</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 2.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 3</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 3.
</p>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="click">Nav item 4</a>
<div class="showup">
<div class="nav-content">
<p>
Dropdown for Nav Item 4.
</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="main-container">
</div>【讨论】：
【参考方案3】：这是你要找的吗？
$(document).ready(function()
$(".click").on("click", function(e)
var menu = $(this);
toggleDropDown(menu);
);
$(document).on('mouseup',function(e)
var container = $("nav .top-bar-section ul");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function()
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active'))
$('a.active').removeClass('active');
);
);
);
function toggleDropDown(menu)
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function()
if (menu.hasClass('active'))
menu.removeClass('active');
else
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function()
$(".main-container").addClass("black-bg");
);
);
if (!isActive)
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function()
$(".main-container").addClass("black-bg");
);
在这种情况下，黑匣子将保留在那里。您之前所做的是明确删除黑盒。
【讨论】：
以上是关于单击第二个下拉列表时，黑框应保持可见的主要内容，如果未能解决你的问题，请参考以下文章