Javascript jQuery可扩展输入div

我有一个表单，输入是带有标题和描述的任务。jQuery中是否有任何有效的方法使每个输入的标题下的详细信息能够在每次单击标题时进行切换

以下是HTML：

<div class="todo-task">

    <div class="task-header">Sample Header</div>

    <div class="task-date">25/06/2017</div>

    <div class="task-description">Description</div>

</div>

样本头
25/06/2017
描述

您可以使用jquery的

.toggle（）

功能在单击标题时显示和隐藏详细信息

在这里，我用一个带有

id=“taskDetails”

的新div包装了您的

details

，当单击带有

id=“taskHeader”

的标题时，它将更改细节

有关进一步添加toogle选项的信息，您可以参考

$（“#任务头”）。单击（函数（）{
$（“#任务详细信息”）.toggle（）；
});
。任务头{
光标：指针；
}

样本头
25/06/2017
描述
您可以执行以下操作：

$('.task-header').click(clickFunction)

function clickFunction () {
  if ($('.task-description').is(":visible")) {
    $('.task-description').hide()
  } else {
    $('.task-description').show()
  } 
}

$('.task-header').click(clickFunction)

function clickFunction () {
  let headerGroupNumber = this.getAttribute('data-headergroup')
  if ($('.task-description').is(":visible")) {
    $(".task-description[data-headergroup='" + headerGroupNumber +"']").hide()
  } else {
     $(".task-description[data-headergroup='" + headerGroupNumber +"']").show()
  } 
}

功能示例：


如果您想要一个多标题和描述的解决方案，那么数据属性可能是一个不错的选择。向发布的html添加数据属性：

<div class="todo-task" data-headergroup="1">
  <div class="task-header" data-headergroup="1">Sample Header</div>
  <div class="task-date" data-headergroup="1">25/06/2017</div>
  <div class="task-description" style="display: none" data-headergroup="1">Description</div>
</div>

示例：
对不起，我没有解释清楚。这是我正在编写的代码。对于每个输入，我希望其说明和日期能够切换。@p_w_hh您应该仍然能够实现第二个答案-只需添加
$（“.task date[data headergroups='“+headerGroupNumber+”]”）。hide（）
如果使用
$”（“.task description[data headergroups='“+headerGroupNumber+”]）将其隐藏到相同的
块中，对于
.show（）
块也是如此。我进行了编辑，以更清楚地显示这一点。问题是，它只适用于示例标题。如果我创建一个新任务，它将无法运行。我希望只有在单击标题时才隐藏详细信息，因此它不应该从一开始就显示：“无”？当然-然后您可以删除
显示：无
。切换功能仍将工作。对于您正在创建的新任务，您需要让动态创建的每个任务都有一个唯一的
data headergroup
值。与动态创建taskId时应用的原理相同：
taskId:“task-”
Brilliant！非常感谢你！对不起，我没有解释清楚。以下是我正在处理的代码：。对于每个输入，我希望其说明和日期切换。请参阅我的更新代码。这将适用于您的用例。确实如此！非常感谢你！