Question

我有一个关于按下按钮后使用切换功能的问题。我有以下jQuery代码：

$(function () {
    $('.navigation').click(function () {                                
        $(".expand, .collapse").toggle();
    });
});

这与以下HTML完美结合：

<div class="container">
  <div class="title">
      <div class="navigation">
        <span class="expand">
          expand          
        </span>
        <span class="collapse">
          collapse          
        </span>
      </div>
  </div>
</div>

但每当我有这种HTML格式时：

<div class="container">
  <div class="title">
      <div class="navigation">
        <span class="expand">
          expand          
        </span>
        <span class="collapse">
          collapse          
        </span>
      </div>
  </div>
</div>

<div class="container">
  <div class="title">
      <div class="navigation">
        <span class="expand">
          expand          
        </span>
        <span class="collapse">
          collapse          
        </span>
      </div>
  </div>
</div>

切换应用于两个容器，这是合乎逻辑但不需要的。我怎么能只触发按下的导航按钮的兄弟姐妹？

我尝试过类似的事情：

$(this).next(".expand, .collapse").toggle();

但这不起作用。任何帮助表示赞赏！

DEMO HERE

Answer 1

你有正确的想法;您需要使用this关键字来引用引发事件的元素并找到它相关的.expand和.collapse元素，但是next()查找兄弟元素，而元素则是需要检索儿童，因此您需要使用find()：

$(function () {
    $('.navigation').click(function () {                                
        $(this).find(".expand, .collapse").toggle();
    });
});

Updated fiddle

Answer 2

使用find()，如下所示。

$(this).find(".expand, .collapse").toggle();

Answer 3

你快到了！ find（）是你的朋友。当与$（this）结合使用时，它将搜索符合您条件的子节点。

$(function () {
            $('.navigation').click(function () {                                
                $(this).find(".expand, .collapse").toggle();
            });
});

JSFiddle

Answer 4

$(".expand, .collapse").toggle();这会将toggle应用于包含expand和collapse类的所有元素，而不管您点击的.navigation div。

更改为

  $(this).find(".expand, .collapse").toggle();

您可以阅读$(this) here。

Answer 5

您必须指定这些类的容器div，您只需使用$(".expand, .collapse", $(this))：

＆＃13;

$(function() {
  $('.navigation').click(function() {
    $(".expand, .collapse", $(this)).toggle();
  });
});

＆＃13;

.navigation {
  min-width: 30px;
  min-height: 20px;
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="title">
    <div class="navigation">
      <span class="expand">
          expand          
        </span>
      <span class="collapse">
          collapse          
        </span>
    </div>
  </div>
</div>

<div class="container">
  <div class="title">
    <div class="navigation">
      <span class="expand">
          expand          
        </span>
      <span class="collapse">
          collapse          
        </span>
    </div>
  </div>
</div>

＆＃13;

Answer 6

嘿试图研究你的问题，并得到了这个有用的链接https://api.jquery.com/siblings/。您可以按如下方式使用它：

$(this).siblings(".expand, .collapse").toggle();

仅切换给定div中的内容

6 个答案: