試圖切換 dd 元素的可見性

Question

我正在嘗試切換 dd 元素的可見性。 例如，如果我單擊一個 dt，它將顯示 dd。 然后，如果單擊下一個 dt，最后一個 dd 應該隱藏並且當前 dd 應該顯示。 現在，我必須點擊同一個 dt 來顯示和隱藏它。

這是 html 代碼的部分：

<template id="todo">
    <div class="todo-item">
        <dt class="todo-id"></dt>
        <dt  class="todo-title"></dt>
        <dd class="todo-description hide"></dd>
    </div>
</template>

這是處理它的聽眾：

 $('body').on('click', '.todo-item dt', function (e) {
    $(this).siblings().closest('.todo-description').toggleClass('hide');     
});

Answer 1

要使其他描述消失，您需要在單擊dt元素時將hide class 添加到它們。 通過首先找到兄弟dd元素，我們可以將其排除在使用.not添加hide class 之外； 然后我們可以在該元素上切換hide class ：

 $('body').on('click', '.todo-item dt', function(e) { let descr = $(this).siblings('.todo-description'); $('.todo-description').not(descr).addClass('hide'); descr.toggleClass('hide'); });

 .hide { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="todo"> <div class="todo-item"> <dt class="todo-id">item #1 id</dt> <dt class="todo-title">item #1 title</dt> <dd class="todo-description hide">item #1 description</dd> </div> <div class="todo-item"> <dt class="todo-id">item #2 id</dt> <dt class="todo-title">item #2 title</dt> <dd class="todo-description hide">item #2 description</dd> </div> </div>