使用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中的錯誤。