试图切换 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>