window.addEventListener函数始终不起作用

时间:2020-09-09 11:12:33

标签: javascript html

通过此代码,当用户单击按钮外部时,我必须隐藏下拉容器。并且代码最初工作正常。但是后来,它也没有响应按钮上的onclick事件。有时候,如果我喜欢一个按钮,它会关闭下拉菜单。我已经尝试了许多stackoverflow问题,但没有得到答案。这是我的代码。希望有人能解决这个问题。

            <div class="button-grp">
                <button class="icon-button" type="button" onclick="menu(event, '1')"><img 
                   src="../../Images/icons/local_library-white-24dp.svg" class="icon"><br>Learning
                 </button>
                <button class="icon-button" type="button"  onclick="menu(event, '2')"><img 
                    src="../../Images/icons/gamepad-white-24dp.svg" class="icon"><br>Tools
                </button>
            </div>
        <div class="sidebar-open">
            <div class="main-options" id="0">
                <button class="options-button" type="button">Academics</button>
                <div class="dropdown-container">
                    <a href="#">Course Details</a>
                    <a href="#">Assignments</a>
                </div>
                <button class="options-button" type="button">Schedule</button>
                <div class="dropdown-container">
                    <a href="#">Exams</a>
                    <a href="#">Classes</a>
                </div>
            </div>
      </div>
     <div id="mainmenu">
            Lorem ipsum dolor sit, 
     </div>

我的Javascript代码如下。

//function to toggle between clicked buttons and close when double clicked on it.
function menu(evt, id) {
  document.querySelectorAll(".main-options").forEach(function(div) {
    if (div.id === id) {
            // Toggle specified DIV
            if(div.style.display === "block"){
                div.style.display = "none";
                document.getElementById("mainmenu").style.marginLeft = "80px";
                document.body.style.backgroundColor = "#fff";
            }else{
                div.style.display = "block";
                document.getElementById("mainmenu").style.marginLeft = "230px";
                document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
            }
    } else {
      // Hide other DIVs
      div.style.display = "none";
    }
  });
}
//function to hide the dropdown when clicked outside the button.
window.addEventListener('click', function(event){
    if (!event.target.matches('.icon-button') ){
    var dropdowns = document.getElementsByClassName("main-options");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
        if (dropdowns[i].style.display === "block") {
        dropdowns[i].style.display ="none";
        document.getElementById("mainmenu").style.marginLeft = "80px";
        document.body.style.backgroundColor = "#fff";

        }
    }
    }
});

1 个答案:

答案 0 :(得分:1)

你为什么不试试这个:

tt <- gsub("-\\..*", "", df$identifier)
tt <- gsub("[^0-9]", "", tt)
tt <- substring(tt, nchar(tt)-12)
paste0(substr(tt, 1, 6), "-", substring(tt, 7))
#[1] "190109-5405303" "190109-8731478" "190109-8260031" "190109-3690341"
#[5] "190109-8841419" "190109-5232506" "190109-2018362" "190109-9339765"