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

Posted 2023-03-05

【中文标题】将单击 javascript 事件应用于 JSP 中的标头，而不是使用 <a> 标记

【英文标题】：Apply on click javascript event to a header in JSP instead of using <a> tag

【发布时间】：2017-11-02 03:30:44

【问题描述】：

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

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。

我希望在单击手风琴栏中的任意位置时触发展开/折叠，而不是单击展开按钮。我是 JSP 新手，谁能帮忙？

【问题讨论】：

删除执行切换的 id 或类，并将其添加到问题中显示的锚标记中，或者如果您共享完整代码会更好地帮助您

【参考方案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(); 
);

【讨论】：

没有用，我将分享所发生的屏幕截图以及可能有帮助的控制台的一部分。 pasteboard.co/dcOv9x8Rz.png

快到了。展开工作，但没有崩溃。谢谢

非常感谢您的帮助。

【参考方案2】：

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

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

我不知道您是如何设置“扩展”功能的，但我想看看您如何使用 javascript 来扩展手风琴栏。