Javascript 尝试切换dd元素的可见性

我正在尝试切换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>

---

要使其他描述消失，当您单击

dt

元素时，需要向它们添加

hide

类。通过首先查找同级

dd

元素，我们可以使用

.not

将其排除在添加

hide

类之外；然后我们可以在该元素上切换

hide

类：

$（'body'）。在（'click'，'todo item dt'，函数（e）{
让descr=$（this）.sides（'.todo description'）；
$（'.todo description'）.not（descr.addClass（'hide'）；
描述切换类（“隐藏”）；
});
.hide{
显示：无；
}

项目#1 id
项目#1标题
项目#1说明
项目#2 id
第2项标题
项目#2说明

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