Question

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

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

只需检查点击目标jQuery event targer

$('body').click(function(e){
  var $elem = $(e.target);
  if ($elem.attr('id') === 'my_nav_bar_id') {
    doSomething();
  }
});

Answer 2

您好，您可以尝试此代码

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>

Answer 3

您可以使用解决方案https://jsfiddle.net/ap7m4xnu/

＆＃13;

var navBtnActive = true;

$('#menuToggle').click(function(e){
    e.stopPropagation();
    navBtnActive = !navBtnActive;
    $("#navContent").slideToggle();
})

$('body').not('#menuToggle').click(function(e) {
    e.preventDefault();
    $("#navContent").slideUp();
});

＆＃13;

#navContainer {
    position: relative;
    display: inline-block;
}

#navContent button {
    display: block;
    width: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navContainer">
    <button id="menuToggle">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>

＆＃13;

Answer 4

您可以使用compareDocumentPosition方法。您可以在此处阅读其文档：https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition

您可以通过执行以下操作来测试菜单是否包含所单击的元素：

var DOCUMENT_POSITION_CONTAINED_BY = 16;
if ((navContainer.compareDocumentPosition(clickedElement) & DOCUMENT_POSITION_CONTAINED_BY) !== 0) {
    // clicked element is inside the menu
} else {
    // clicked element is outside of the menu
}

在你的例子中它会像这样工作：

＆＃13;

var navBtnActive = true;

function toggleMenu(){
    navBtnActive = !navBtnActive;
    $("#navContent").slideToggle();
}

$('body').click(function(event) {
    var DOCUMENT_POSITION_CONTAINED_BY = 16,
        navContainer = document.getElementById('navContainer'),
        compareResult = navContainer.compareDocumentPosition(event.target) & DOCUMENT_POSITION_CONTAINED_BY;
    if (compareResult === 0) {
      // clicked element is outside of the menu
      toggleMenu();
}
});

＆＃13;

#navContainer {
    position: relative;
    display: inline-block;
}

#navContent button {
    display: block;
    width: 100px;
}

＆＃13;

<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>

＆＃13;

Answer 5

＆＃13;

function toggleMenu(){   
    $("#navContent").slideToggle();
}

$('body').click(function(e) {  
    if(document.querySelector('body')== e.toElement && $("#navContent").is(':visible')){
     $("#navContent").slideToggle();
    }
});

＆＃13;

#navContainer {
    position: relative;
    display: inline-block;
}

#navContent button {
    display: block;
    width: 100px;
}

＆＃13;

<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>

＆＃13;

检查导航栏是否被点击

5 个答案: