javascript - 将单击 javascript 事件应用于 JSP 中的 header 而不是使用 标记

Question

我目前有一个带有切换按钮的标题，点击后会展开。

HTML :

<h3 class="toggle_header" id="Tax_information_eSignature">
    <a href="javascript:void(0);" class="icon_toggle_open"></a>
    <spring:message code="TaxInformation.eSignature" />
    <label for="Tax_information_eSignature"></label>
</h3>

JS:

$(document).on('click', '.icon_toggle_open', function (e) {
        stop(e);
        $(this).removeClass("icon_toggle_open")
            .addClass("icon_toggle_close")
            .attr("alt","Show")
            .attr("title","Show")
            .parent().next('.toggle_content').hide();
        $(window).blur();       
      });

     $(document).on('click', '.icon_toggle_close', function (e) {
        stop(e);
        $(this).removeClass("icon_toggle_close")
            .addClass("icon_toggle_open")
            .attr("alt","Hide")
            .attr("title","Hide")
            .parent().next('.toggle_content').show();
        $(window).blur();       
      });

它目前正在按预期工作。用户需要点击切换图标来展开 div。

我希望在单击 Accordion 栏中的任意位置时触发展开/折叠，而不是单击展开按钮。我是 JSP 的新手，有人可以帮忙吗？

Answer 1

您想将事件监听器设置在 DOM 中更高的位置。尝试将您的事件监听器从 .icon_toggle_open 移动到 .toggle_header。

$(document).on('click', '.toggle_header', function (e) {
  stop(e);
  var opened = $(this).children('.icon_toggle_open')
  if(opened.length > 0){
    opened
      .removeClass("icon_toggle_open")
      .addClass("icon_toggle_close")
      .attr("alt","Show")
      .attr("title","Show")
      .parent().next('.toggle_content').hide();
  } else {
    $(this)
      .children(".icon_toggle_close")
      .removeClass("icon_toggle_close")
      .addClass("icon_toggle_open")
      .attr("alt","Hide")
      .attr("title","Hide")
      .parent().next('.toggle_content').show();
  }
  $(window).blur(); 
});