如果使用jQuery打开，则显示div并隐藏现有div？
如果使用jQuery打开，则显示div并隐藏现有div？
提问于 2013-06-08 15:10:15
我有两个默认隐藏的div。然后，用户在单击时显示div。如果div已经打开，并且用户单击显示另一个div，我希望当前div隐藏起来，并显示新div。
我现在的代码是..。
<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不应该同时显示！
提前感谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-06-08 15:24:59
使用同一个类可以让这件事变得容易得多？
<div class="btn">MENU</div>
<div class="btn">SEARCH</div>
<div class="slide menu-box">MENU BOX</div>
<div class="slide search-box">SEARCH BOX</div>js
$('.btn').on('click', function(){
$('.slide').slideUp().eq($(this).index()).stop().slideToggle();
});FIDDLE
Stack Overflow用户
发布于 2013-06-08 15:15:33
将搜索单击处理程序更改为：
$('.search').click(function(){
$('.search-box').slideToggle();
if($(".menu-box").is(":visible")) {
$(this).slideToggle();
}
});而您的菜单处理程序也要这样做，只需检查搜索框的可见度.
Stack Overflow用户
发布于 2013-10-02 13:30:47
<h3><a href="#1" class="toggler">Title of Section 1</a></h3>
<div id="1" class="element">Content goes here for the above h tag</div>
<h3><a href="#2" class="toggler">Title of Section 2</a></h3>
<div id="2" class="element">Content goes here for the above h tag</div>
$(".toggler").click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
$(".element").hide();
$(id).show('slow');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17000866
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号