Question

我无法选择最接近的比赛。我已经尝试过.closest，.next和.nextall;我也试过使用（这个），但我认为我正在使用它们。

这是我想要实现的目标：点击.show后，最近的.list-content将切换，最近的toggleClass图标也会旋转180.

<ul class="list-unstyled">
    <li class="list-menu">
        <a href="javascript:void(0);" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
    </li>
    <li class="list-content">Hidden Content until Clicked</li>

    <li class="list-menu">
        <a href="javascript:void(0);" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
    </li>
    <li class="list-content">Hidden Content until Clicked</li>
</ul>

<script>
    $(document).ready(function() {
        $(".list-content").hide();
            $(".show").click(function() {
                $(".icon-chevron-down").toggleClass("icon-rotate-180");
                $(".list-content").toggle();
            });
        });
</script>

Answer 1

首先，您的HTML无效，因为您不能将div元素作为ul的直接子元素。考虑到这一点，试试这个：

<ul class="list-unstyled">
    <li class="list-menu">
        <a href="#" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
        <div class="list-content">Hidden Content until Clicked</div>
    </li>

    <li class="list-menu">
        <a href="#" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
        <div class="list-content">Hidden Content until Clicked</div>
    </li>
</ul>

$(".show").click(function(e) {
    e.preventDefault();
    $(".icon-chevron-down", this).toggleClass("icon-rotate-180");
    $(".list-content", $(this).closest('li')).toggle();
});

Answer 2

ul / li在这里是错误的。第二个li与第一个li有关。请使用dl，dd和dt代替 - 这不是完美匹配，但优于ul / li！
a用于链接，但您不会调用网址。请使用dd本身或span，这样您就不需要javascript:void(0);而不需要e.preventDefault();。

运营日期隐藏内容直到单击
```
  <dd class="list-menu show">
      Date of Operations
      <i class="icon-chevron-down pull-right"></i>
  </dd>
  <dt class="list-content">Hidden Content until Clicked</dt>
```
$（“。show”）。click（function（e）{ $（本）.closest（”图标字形下来。 “）toggleClass（” 图标 - 转 - 180" ）。 $（本）。接下来（ “dt.list内容”）切换（）; }）;

（我复制了一部分RoyMcCrossan的回答来自Selecting Closest Match using jQuery）

抱歉结构坏了，看起来像Stackoverflow中的一个错误。

使用jQuery选择最接近的匹配

2 个答案: