关闭其他打开项目的jQuery切换问题

Question

我有一种情况，我在一个页面上有几个可切换的项目。当切换打开一个项目时，它应该搜索已经切换打开的项目并在打开新项目之前关闭它们。

一次只能切换打开一个项目。

这是我最基本的代码尝试：

$('.board-of-directors .expand').click(function(event) {        
    $(this).toggleClass('contract');
    $(this).parent().find('.popout').toggle();
});

此代码迭代不会关闭以前打开的项目，因此我将其更新为：

$('.board-of-directors .expand').click(function(event) {    
    $('.contract').parent().find('.popout').toggle(); /* closes any previously opened items */
    $('.contract').removeClass('contract'); /* removes the class which shows items as open */
    $(this).toggleClass('contract');
    $(this).parent().find('.popout').toggle();
});

这在一定程度上奏效了。它关闭其他未清项目。问题是，当您打开一个项目，然后单击同一个项目以手动关闭它时，不会“出现”任何事情。实际上，它会按照上面的代码关闭并重新打开同一个项目。

我尝试了很多方法来实现这一点，包括添加/删除类、模拟打开项目上的点击事件以关闭它们等，但最终结果始终相同。

我还尝试添加更复杂的 if/else 语句，但未能解决此问题。我想这不是 jQuery 问题，而是逻辑问题。

这是“如果”的尝试：

$('.board-of-directors .expand').click(function(event) {        
    if($('.board-of-directors div').hasClass('contract')) {
        $('.member div').removeClass("contract");
        $('.member div:first-child').addClass("expand");
        $('.right div').removeClass("director-selected");
        $(".popout").fadeOut('fast');       
    };
    if($(this).hasClass('contract')) {
        $(this).removeClass("contract");
        $(this).addClass("expand");
        $(this).parent().removeClass("director-selected");
        $(this).stop().parent().find(".popout").fadeOut('fast');        
    };
    if($(this).hasClass('expand')) {
        $(this).addClass("contract");
        $(this).removeClass("expand");
        $(this).parent().addClass("director-selected");
        $(this).stop().parent().find(".popout").fadeIn('fast');     
    };
});

有人可以帮我完成我想要的吗？

当一个项目被切换打开时，它应该关闭所有其他项目。同时，当点击关闭刚刚打开的项目时，应该关闭而不重新打开。

编辑：编辑以添加 HTML 示例。这是在 WordPress 查询中。

<div class="board-of-directors">
     <div class="member">
          <div class="expand"></div>
          <div class="name">
               <?php the_title();?>
          </div>
          <div class="position"><?php echo $position;?></div>
          <div class="popout">
               <?php echo $bio;?>
          </div>
     </div>
</div>

Answer 1

见http://jsfiddle.net/G65J7/5/。由于您没有提供任何 DOM，因此我进行了常规设置。

HTML 部分：

<h1>Board of directors</h1>
<ul class="list">
  <li class="list__item is-active">
    <h2>Jon Doe</h2>
    <a href="#" class="list__toggle">show more</a>
    <div class="list__item--more-info">
      wow, this is great
    </div>
  </li>
  <li class="list__item">
    <h2>Jane Doe</h2>
    <a href="#" class="list__toggle">show more</a>
    <div class="list__item--more-info">
      wow, this is great
    </div>
  </li>
</ul>

很少的 CSS；如您所见，类 is-active 负责显示。

.list__item--more-info {
    display: none;
}
.is-active .list__item--more-info {
    display: block;
}

还有一些 jQuery: onClick 首先关闭所有活动项，然后根据当前切换的状态应用要显示的类。

$('.list__toggle').on('click', function (event) {
    var $this = $(event.currentTarget);
    var $parent = $this.closest('.list__item');
    var $openedItems = $('.list__item.is-active');
    var isCurrentlyActive = $parent.hasClass('is-active');

    $openedItems.removeClass('is-active');
    $parent.toggleClass('is-active', !isCurrentlyActive);

    event.preventDefault();
});

Answer 2

最简单、最有效的方法是只添加同一个类，无论它是哪个元素。

Fiddle 示例

HTML：

<div class="abc"></div>

<div class="def"></div>

<div class="ghi"></div>

CSS：

div { width: 100px; height: 100px; background: blue; margin: 20px; }

.abc.z { background: red; }

.def.z { width: 300px; }

.ghi.z { box-shadow: 0 0 8px black; }

jQuery:

$('div').click(function() {
    $('div').removeClass('z');
    $(this).addClass('z');
});

---

因此，不要添加/删除 contract、expand、director-selected 等类。您将 z 类全部删除，然后将 z 类到你点击的那个。此外，“div”只是一个示例，您应该创建一个所有这些项目共享的类来代替 div。

请注意一定要做到.abc.z，而不是.abc .z，差别很大。

---

编辑：

Fiddle

$('div').click(function() {
    if ($(this).hasClass('z')) {
        $('div').removeClass('z');
    }
        else {
            $('div').removeClass('z');
            $(this).addClass('z');
        }
});

好的，现在这两种方式都适用。因为当您单击同一个 div 两次时，它将关闭该 div 以及所有其他 div 。