尝试切换 dd 元素的可见性

Question

我正在尝试切换 dd 元素的可见性。例如，如果我单击一个 dt，它将显示 dd。然后，如果单击下一个 dt，则应隐藏最后一个 dd，并显示当前 dd。现在，我必须单击相同的dt来显示和隐藏它。

这是代码的一部分：

<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

要使其他描述消失，您需要在单击元素时向其添加类。通过首先找到同级元素，我们可以将其排除在使用 ;然后我们可以切换该元素上的类：hidedtddhide.nothide$('body').on('click', '.todo-item dt', function(e) {&nbsp; let descr = $(this).siblings('.todo-description');&nbsp; $('.todo-description').not(descr).addClass('hide');&nbsp; descr.toggleClass('hide');});.hide {&nbsp; display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="todo">&nbsp; <div class="todo-item">&nbsp; &nbsp; <dt class="todo-id">item #1 id</dt>&nbsp; &nbsp; <dt class="todo-title">item #1 title</dt>&nbsp; &nbsp; <dd class="todo-description hide">item #1 description</dd>&nbsp; </div>&nbsp; <div class="todo-item">&nbsp; &nbsp; <dt class="todo-id">item #2 id</dt>&nbsp; &nbsp; <dt class="todo-title">item #2 title</dt>&nbsp; &nbsp; <dd class="todo-description hide">item #2 description</dd>&nbsp; </div></div>