我有两个默认隐藏的 div。然后用户在点击时显示 div。如果一个 div 已经打开,并且用户单击以显示另一个 div,我希望当前 div 隐藏,并显示新的 div。
我目前的代码是这个..
HTML
<div class="menu">MENU</div>
<div class="search">SEARCH</div>
<div class="menu-box">MENU BOX</div>
<div class="search-box">SEARCH BOX</div>
CSS
.menu, .search {
display:inline-block;
cursor:pointer;
}
.menu, .search, .menu-box, .search-box {
padding:20px;
background-color: #ccc;
margin-right:10px;
}
.menu-box, .search-box {
width:20%;
display:none;
}
.menu-box {
background-color:red;
}
.search-box {
background-color:green;
}
JAVASCRIPT
$('.menu').click(function(){
$('.menu-box').slideToggle();
});
$('.search').click(function(){
$('.search-box').slideToggle();
});
你可以在这里看到一个工作演示......
http://codepen.io/seraphzz/pen/zbHDk
我环顾四周寻求帮助,但找到的所有解决方案都是针对选项卡的,其中始终显示一个 div。这不是我所追求的。仅当单击该链接时才应显示 div。
所以要确认,如果“菜单”div 已经打开,并且用户点击“搜索”,我希望隐藏“菜单”div 并显示“搜索”。两个 div 不应该同时显示!
提前致谢