将点击 javascript 事件应用于 JSP 中的 header 而不是使用 <a> 标记

Question

我目前有一个 header 带有一个切换按钮，点击它会展开。

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。

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

Answer 1

将事件监听器应用到整个 h3 而不是 a 标签：

document.querySelector('#Tax_information_eSignature').addEventListener('click', e => {
    // Expand your accordion bar by selecting it
});

我不知道您是如何设置 'expansion' 功能的，但我想看看您是如何 javascript 展开手风琴栏的。

Answer 2

您想在 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(); 
});

将点击 javascript 事件应用于 JSP 中的 header 而不是使用 <a> 标记

Apply on click javascript event to a header in JSP instead of using <a> tag

html

javascript

css

jsp

href