切换关闭外部点击
[英]Toggle close outside click
问题描述
我正在为dd & dt使用切换类，它工作正常，但是我的问题是，如果用户单击外面，我想关闭该切换。 如何做到这一点？
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
jQuery=$.noConflict();
jQuery(document).ready(function() {
jQuery('.navigation dd').hide();
jQuery('.navigation dt').click(function(){
jQuery(this).next('dd').slideToggle('slow');
jQuery(this).toggleClass('glace_navigationlayer-collapsed');
});
});
</script>
3 个解决方案
解决方案1
0 2016-04-01 21:17:57
您也可以尝试-DBS拥有的是正确的 ，（他发表在评论中），恕我直言。
//clicking on the body, closes the toggleitem
jQuery(document.body).bind('click.closedd', function() {
jQuery('.navigation dd').hide();
});
// clicking on the toggle item, won't trigger the click on the body
// that we set up above.
jQuery('.navigation dd').bind('click.closedd', function(e) {
e.stopPropagation();
});
解决方案2
0 2016-04-01 21:21:01
您需要侦听<body>上的点击，然后检查以确保目标不在导航组件之外。
jQuery('body').on('click', function(evt) {
var $target = $(evt.target);
if ( !$target.closest('.navigation').length ) {
// code to collpase the nav menu
}
});
我还建议重构您的导航代码，以使用单独的展开和折叠功能，而不是依赖slideToggle和toggleClass 。
祝好运！
解决方案3
0 2016-04-01 21:27:00
对于要求不是很确定，但是您可以尝试在mouseenter和mouseleave事件上实现以上要求。
但是，如果必须仅在单击时实现上述功能，则必须将click事件连接到覆盖整个html主体的容器上。
关闭切换外部点击
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.