Javascript 单击滑动切换 div 但先隐藏其他人 - jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14838074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
On click slidetoggle div but hide others first - jQuery
提问by Liam
I have a page that when a user clicks a title, the following div toggles display.
我有一个页面，当用户单击标题时，以下 div 会切换显示。
I want to somehow say if any other divs are display:block then set them to display none first.
我想以某种方式说是否有任何其他 div 是 display:block 然后将它们设置为先不显示。
I have the following...
我有以下...
$('.office-title').click(function(){
$(this).next('div').slideToggle();
return false;
});
and my html markup is as such...
我的 html 标记就是这样......
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
回答by jubair
</office>is not a valid closing. The closing should be </div>
</office>不是有效的关闭。闭幕式应该是</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
<div class="office-row">
<h3 class="office-title">Title</h3>
<div class="office">sadasd</div>
</div>
CSS:
CSS：
.office
{
display: none;
}
and jquery:
和jQuery：
$(function () {
$('.office-title').click(function () {
$(this).next('div').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
});
回答by Jai
This should do it: http://jsfiddle.net/gKgJ7/
这应该这样做：http: //jsfiddle.net/gKgJ7/
$('.office-title').click(function(){
$('.office').slideUp();
$(this).next('div').slideToggle();
return false;
});
note:
笔记：
This is not a valid closing:
这不是一个有效的结束：
<div class="office">sadasd</office>
//---------------------^^^^^^^^----should be </div>
回答by KBN
$('.office-title').click(function(){
$(this).next('div').slideToggle();
$(this).parent(".office-row").siblings().hide(); // this should help
return false;
});
回答by Pandian
Try like below... it will work...
像下面这样尝试......它会起作用......
Fiddle : http://jsfiddle.net/RYh7U/83/
小提琴：http: //jsfiddle.net/RYh7U/83/
$(document).ready(function () {
$('.office-title').next('div').slideToggle();
$('.office-title').click(function(){
$('.office-title').next('div').slideUp();
$(this).next('div').slideToggle();
return false;
});
});
回答by asifsid88
This will close all the open div with animation and opens the required div
这将关闭所有打开的带有动画的 div 并打开所需的 div
$('.office-title').click(function(){
var that = $(this);
if('.office').each(function() {
if($(this) == $(that).next('div')) {
$(this).slideToggle();
}
else {
if($(this).css('display')!=='none') {
$(this).slideToggle();
}
}
});
return false;
});
