如何隐藏下拉菜单，如果我点击外部？

我有jQuery中的这个功能，通过切换类显示来显示和隐藏选项。如何隐藏下拉菜单，如果我点击外部？

$('#button').click(function(){ 
     $('#dropDownMenu').find('.option').toggleClass('showing', 500, "easeOutSine"); 
    });

CSS：

#dropDownMenu .option{ 
    height: 0px; 
} 

#dropDownMenu .option.showing{ 
    height: initial; 
    padding: 25px; 
}

HTML：

 <button id="button"></button> 
     <div id="dropDownMenu"> 
      <div class="option">OP1</div> 
      <div class="option">OP2</div> 
      <div class="option">OP3</div> 
      <div class="option">OP4</div> 
      <div class="option">OP5</div> 
     </div>

如何隐藏通过点击外，其他任何地方的页面上的菜单？

来源

2016-12-06 Talis Galhardi

canyou还提供HTML代码吗？ – Kebeng

使用文档点击并隐藏下拉菜单。只需添加条件为您的元素，以便它不会触发您的元素点击

$(document).click(function(event){ 
if (!event) { var event = window.event; } 

     var S = event.srcElement ? event.srcElement : event.target; 
     If(($(S).attr('id')!='dropDownMenu')||$(S).hasClass('option')==false) 
    { 
     $('#dropDownMenu').hide(); 
     } 
     })

来源

2016-12-06 14:55:02 Sameer

尝试附加一个鼠标输出事件，但正如Sameer所说，只有将鼠标放在首位时才会触发。 – Bindrid

，但鼠标在你点击外部按钮 – Kebeng

你试过用.focusout()事件监听器？

你可以尝试这样的

$('#button').focusout(function(){ 
     $('#dropDownMenu').find('.option').removeClass('showing', 500, "easeOutSine"); 
    });

来源

2016-12-06 14:57:43 Kebeng

添加$('body').click(function(e) {处理点击在整个文档主体

$('body').click(function(e) { 
 
    if($('#dropDownMenu').find('.option').hasClass('showing')) { 
 
    if (e.target == $('#button')[0] || e.target == $('#dropDownMenu')[0]) e.preventDefault(); 
 
    else 
 
     $('#dropDownMenu').find('.option').removeClass('showing', 500, "easeOutSine"); 
 
    } 
 
}); 
 

 
$('#button').click(function(e) { 
 
    e.preventDefault(); 
 
    $('#dropDownMenu').find('.option').toggleClass('showing', 500, "easeOutSine"); 
 
});

#dropDownMenu .option { 
 
    height: 0px; 
 
    display:none; 
 
} 
 
#dropDownMenu .option.showing { 
 
    height: initial; 
 
    display:block; 
 
    padding: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button">menu</button> 
 
<div id="dropDownMenu"> 
 
    <div class="option">OP1</div> 
 
    <div class="option">OP2</div> 
 
    <div class="option">OP3</div> 
 
    <div class="option">OP4</div> 
 
    <div class="option">OP5</div> 
 
</div>

来源

2016-12-06 15:02:05 jafarbtech

之前触发，这将工作。但它似乎效率低下，因为你听每次点击正文元素。也''toggleClass'身体单击事件应该'removeClass' – Kebeng

我已经更新了答案 – jafarbtech

$(document).ready(function() { 
 
    $('.menu > li').click(function() { 
 
    var t = $(this); 
 
    if (!t.hasClass('active')) { 
 
     t.addClass('active').next('.submenu').addClass('active'); 
 
    } else { 
 
     t.removeClass('active').next('.submenu').removeClass('active'); 
 
    }  
 
    }); 
 
    $('html').click(function(event) { 
 
    var e = $(event.target); 
 
    if (e.parents('.submenu').length < 1 && e.next('.submenu').length < 1) { 
 
     $('.submenu').removeClass('active'); 
 
    } 
 
    }); 
 
});

.submenu { 
 
    display: none; 
 
} 
 
.submenu.active { 
 
    display: block; 
 
} 
 
.menu > li { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li class="submenu-link">Menu Item</li> 
 
    <ul class="submenu"> 
 
    <li>SubMenu Item</li> 
 
    </ul> 
 
</ul>

如果目标事件没有父级子菜单，关闭下拉菜单

来源

2016-12-06 16:09:18

如何隐藏下拉菜单，如果我点击外部？

回答

相关问题