切換關閉外部點擊
[英]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.