在点击javascript事件应用到JSP中的标题而不是使用<a>标记

我目前有一个标题和一个切换按钮，它将在点击时展开。在点击javascript事件应用到JSP中的标题而不是使用<a>标记

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新手，任何人都可以帮忙吗？

来源

2017-06-01 Phoenix

删除ID或类上的切换正在进行，并将其添加到在你的问题出在锚标记，否则将更好地帮助你，如果你分享全码 –

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

来源

2017-06-01 06:36:34

我已添加编辑的JS代码 – Phoenix

。尝试一下。 –

没有工作，我分享了可能帮助的一部分控制台发生的事情的屏幕截图。 https://pasteboard.co/dcOv9x8Rz.png – Phoenix

应用和事件监听器到整个h3代替a标签：

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

我不知道你是如何设置的“扩张”的功能，但我想看看你怎么样了做你的JavaScript来扩大手风琴吧。

来源

2017-06-01 06:23:59

我已经添加了JS代码到题。 – Phoenix

在点击javascript事件应用到JSP中的标题而不是使用<a>标记

回答

相关问题