javascript - 检查导航栏是否被点击

Question

我有一个导航栏，想在点击外面时关闭它。我唯一需要检查的是 body 的点击事件。

var navBtnActive = true;

function toggleMenu(){
    navBtnActive = !navBtnActive;
    $("#navContent").slideToggle();
}

$('body').click(function() {
     // if( clicked target is NOT the menu ){ 
      // if(navBtnActive){ // just if the menu is open
         //  toggleMenu();
     // }
    // }
});

#navContainer {
    position: relative;
    display: inline-block;
}

#navContent button {
    display: block;
    width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="navContainer">
        <button onclick="toggleMenu()">Menu</button>
        <div id="navContent">
            <button onclick="toggleMenu()">Slider</button>
            <button onclick="toggleMenu()">Calculator</button>
            <button onclick="toggleMenu()">Imageupload</button>
            <button onclick="toggleMenu()">Settings</button>
            <button onclick="toggleMenu()">Search</button>
            <button onclick="toggleMenu()">Servercall</button>
        </div>
    </div>

正如您在下面看到的，我的 $('body').click(function() 获得了关闭它的代码。我只是想获得一种方法来检查被点击的对象是否是菜单本身与否。如果没有，请关闭菜单。

Answer 1

你好，你可以试试这个代码

var navBtnActive = true;

function toggleMenu(e) {
  navBtnActive = !navBtnActive;
  $("#navContent").slideToggle();
}


jQuery(document).on('click', function() {
  $("#navContent").slideUp();
});
jQuery('#navContainer').on('click', function(e) {
  e.stopPropagation();
});

#navContainer {
  position: relative;
  display: inline-block;
}

#navContent button {
  display: block;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="navContainer">
  <button onclick="toggleMenu()">Menu</button>
  <div id="navContent">
    <button onclick="toggleMenu()">Slider</button>
    <button onclick="toggleMenu()">Calculator</button>
    <button onclick="toggleMenu()">Imageupload</button>
    <button onclick="toggleMenu()">Settings</button>
    <button onclick="toggleMenu()">Search</button>
    <button onclick="toggleMenu()">Servercall</button>
  </div>
</div>