javascript - 如何仅在满足条件时调用 JS 函数

Question

我有一个名为“位置”的下拉列表，当我单击导航栏或标题容器时需要将其关闭。到目前为止，我无法为这种情况创造正确的条件。我添加了我的代码笔以供引用..https://codepen.io/Joselle24/pen/dyNbzKY.....需要一些帮助..非常感谢

<nav id="mainnavbar" onload="myNaveffect()">
      <!--3 divs-->
  <div class="imageicon">
    <a href="index.html"><img src="images/brandlogo2.png" alt="brandlogo" width="50px" height="50px"></a>
    <a href="index.html" class="brandtitle" alt="brandtitle">Website Name</a>
  </div>

  <div class="navbarlink_uno">
    <ul>
      <li onclick="myLocfunction()" class="dropbtn">
        <a target="_blank" style="padding-right: 2%;"> Locations</a>
        <i class="arrow down"></i>
      </li>
      <div class="locdropdown_container">
        <a href="#" class="">Restaurant</a>
        <a href="navbarlinks/location/pbkbar/index_pbkbar.html">PBK Mini Bar</a>
      </div>

      <li class="menu"><a href="navbarlinks/menu/index_menu_seasonal.html" target="_self" class="links">Menu</a></li>
      <li class="story"><a href="navbarlinks/story/index_story.html" target="_self" class="links">Story</a></li>
      <li class="gallery"><a href="navbarlinks/gallery/index_gallery.html" target="_self" class="links">Gallery</a></li>
      <li class="rewards"><a href="navbarlinks/rewards/index_rewards.html" target="_self" class="links">Rewards</a></li>
      <li class="donate"><a href="navbarlinks/donate/index_donate.html" target="_self" class="links">Donate</a></li>
      <li class="orderbtn"><a href="navbarlinks/order/index_order.html" target="_self">Order Pickup & Delivery</a></li>
    </ul>
  </div>

  <div class="burgernavbar">
    <i class="fa fa-bars"></i>
  </div>
</nav>

  
<header>
    
</header>

这是我的 JS

/* LOCATION FINDER TAB DROPDOWN BUTTON */
/* LOCATION FINDER TAB DROPDOWN BUTTON */

   //function to add ".show" selector to display "locdropdown_container" mini-container*/  
function myLocfunction() { 
    let xr = document.getElementsByClassName("locdropdown_container");
    xr[0].classList.toggle("show");  //we use the toggle()method, because it make the "class" selector on/off
};  

   //function to remove ".show" selector */
function closelocbtn(){
  const locbodyclose = document.getElementsByClassName("locdropdown_container");
        locbodyclose[0].classList.remove("show");  //we use the remove()method, because it makes the toggle()method functionable after invoking the remove()method
};  
    
  //loop all parent container after nav container*/    
let locx1, locx2;

// locx1 = document.querySelectorAll("nav, header"); //did not work
locx1 = document.querySelectorAll("nav ~ header"); //selects all element after nav container


  for (locx2 = 0; locx2 < locx1.length; locx2++) {   //loop all element
       locx1[locx2].addEventListener("click", closelocbtn);  //add an event listener and a function
};


//problem: need to invoke the function closelocbtn(), also to nav container with id#mainnavbar when the "classList.toogle" is active/on  


 /*Tested and did not work:*/
var demoss =document.querySelectorAll("#mainnavbar");  //added for selection

//var dddd = document.querySelectorAll(".show");  //store the class selector .show. 

//or

var dddd =  xr[0].classList.toggle("show");
 if (dddd == true){ //what i when here is when the .show class is selected the var demoss will execute the closelocbtn().
      demoss[0].addEventListener("click", closelocbtn);  //added
    };
    

Answer 1

need to invoke the function closelocbtn(), also to nav container with id#mainnavbar when the "classList.toogle" is active/on

我更改了您用来选择 #mainnavbar 的选择器字符串或 header旁边 nav

let locx1 = [...document.querySelectorAll("#mainnavbar, nav ~ header")];
const myLocfunction = () => document.querySelector(".locdropdown_container").classList.toggle("show");
const closelocbtn = () => document.querySelector(".locdropdown_container").classList.remove("show");

locx1.forEach(elm => elm.addEventListener('click', closelocbtn));