Question

我有3个div，每个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()？

Answer 1

切换并不总是一个不错的选择。它仅对简单的打开/关闭项目有用。

尝试专门针对所选项目和所有未选择项目的内容（使用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();
    }
});

在同一显示区域中切换div的可见性的优雅方式

1 个答案: