尝试切换 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) {

  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>