jQuery可扩展输入div

Question

我有一个带有输入的表单是带有标题及其描述的任务。 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>

Answer 1

单击标题时，可以使用jquery的.toggle()函数显示和隐藏详细信息。

在这里，我用details的新div包裹了您的id="taskDetails"，当单击带有id="taskHeader"的标题时，它会跳过细节。

要进一步添加toogle选项，可以参考https://api.jquery.com/toggle/

$("#taskHeader").click(function() {
  $("#taskDetails").toggle();
});

.task-header {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="todo-task">

  <div id="taskHeader" class="task-header">

    Sample Header

  </div>

  <div id="taskDetails">

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

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

已更新：

如果您有多个todo-task的div，则可以执行以下操作：

$(function() {
  $(document.body).on("click", "div.task-header", function() {
    $(this).nextAll().toggle();
  });
});

.task-header {
  cursor: pointer;
}

.todo-task {
  padding-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<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>

Answer 2

您可以执行以下操作：

export class MessagesComponent {
    @Input() messages: Message[];
    @Output() onLoadMoreMessages = new EventEmitter<Message[]>();
    
    someMethod() {
       ...
       this.onLoadMoreMessages.emit(...);
    }
}

功能示例：https://codepen.io/rp3/pen/yLOGgKB

---

如果您想为多个标题和描述提供解决方案，则可以使用数据属性。将数据属性添加到您发布的html中：

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

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

然后js将更像这样：

<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>

示例：https://codepen.io/rp3/pen/BaKvpOv