在同一显示区域切换div的可见度的优雅方法
在同一显示区域切换div的可见度的优雅方法
提问于 2014-09-16 15:08:00
我有3个div，每个都包含一个隐藏字段：
<div class="item-wrapper">
<div class="item-title">Button 1</div>
<div class="hidden-field>Some hidden data</div>
</div>
<div class="item-wrapper">
<div class="item-title">Button 2</div>
<div class="hidden-field>Some more hidden data</div>
</div>
<div class="item-wrapper">
<div class="item-title">Button 3</div>
<div class="hidden-field>Even more hidden data</div>
</div>我的jQuery看起来是这样的：
$( ".item-title" ).click(function() {
$( this ).next().slideToggle( "slow" );
$( this ).toggleClass( "item-active" );
});隐藏字段div有一个绝对位置，显示在三个包装器下面.我想找到一种方法，一次只显示一个隐藏字段，这基本上意味着，如果任何隐藏字段在单击时可见，它需要首先隐藏。
是否有一种优雅的方法来做到这一点，或者我将不得不用条件从slideToggle()切换到hide()和show()？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-09-16 15:17:11
切换并不总是一个好的选择。它只对简单的打开/关闭项有用。
尝试对所选项和所有未选定项进行特定操作的内容(使用not)。
http://jsfiddle.net/gu6w8Lxb/
$( ".item-title" ).click(function() {
var $this = $(this);
$( ".item-title" ).not($this).removeClass("item-active").next().slideUp();
$this.addClass("item-active").next().slideDown();
});可进一步缩短为：
var $items = $(".item-title");
$items.click(function() {
var $this = $(this);
$items.not($this).removeClass("item-active").next().slideUp();
$this.addClass("item-active").next().slideDown();
});如果希望当前项切换到打开/关闭，请测试其活动类：
http://jsfiddle.net/gu6w8Lxb/1/
var $items = $(".item-title");
$(".item-title").click(function () {
var $this = $(this);
if ($this.hasClass("item-active")) {
$this.removeClass("item-active").next().slideUp();
} else {
$items.not(this).removeClass("item-active").next().slideUp();
$this.addClass("item-active").next().slideDown();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25872348
复制相关文章
相似问题
腾讯云开发者
