使用jQuery选择最接近的匹配项

Question

我在选择最接近的比赛时遇到麻烦。 我已经尝试过.closest ， .next和.nextall ; 我也尝试使用（this），但我认为我使用的方式不正确。

这是我要实现的目标：单击.show ，最接近的.list-content将会切换，最接近的toggleClass icon-rotate-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

1. ul / li在这里是错误的情况。 第二li与第一li 。 请改用dl ， dd和dt －这不是完美的匹配，但比ul / li ！

2. 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）{$（this）.closest（“。icon-chevron-down”）。toggleClass（“ icon-rotate-180”）; $（this）.next（ “ dt.list-content”）。toggle（）;}）;

（我从使用jQuery选择最接近匹配中复制了RoyMcCrossan的答案的一部分）

对不起，结构已损坏，看起来像Stackoverflow中的错误。