在點擊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>標記

回答

相關問題