jquery dropdown不能正常工作

Question

我正在用jQuery，HTML和CSS創建一個下拉菜單。我想在用戶點擊下拉菜單之外時關閉下拉菜單。但它不能正常工作。

JS

function _drpdntest() { 
$(".drpdn-click").click(function(){ 
var _drpdn_container = $(this).attr("data-drpdn-click"); 
var _drpdn_content = $('[data-drpdn-content="'+_drpdn_container+'"]'); 
_drpdn_content.toggleClass("drpdn-show"); 
_drpdn_content.siblings().removeClass("drpdn-show"); 
$(document).click(function(event){ 
_drpdn_content.removeClass("drpdn-show"); 
}); 
$(this, _drpdn_content).click(function(event){ 
event.stopPropagation(); 
}); 
}); 
} 
// Run Component Function 
$(document).ready(function(){ 
_drpdntest(); 
}); 

HTML

<button class="drpdn-click" data-drpdn-click="main">CLICK</button> 
<div class="drpdn-content drpdn-body" data-drpdn-content="main"> 
Main 
</div> 

CSS

.drpdn-content { 
z-index: 1000; 
position: absolute; 
display:none; 
overflow: hidden; 
} 
.drpdn-content.drpdn-show { 
display: block; 
} 

Answer 1

這是因爲你還沒有爲按鈕，點擊添加stopPropagation()。由於它在按鈕上單擊它觸發文檔點擊。

另外$(this, _drpdn_content)應該是$(_drpdn_content, this)或乾脆刪除這個，而添加stopPropagation。

這裏第二個參數提供了執行選擇器搜索的上下文，簡言之，第二個參數是parent，並且您正在說要搜索與第一個參數中提供的選擇器匹配的所有childs。

function _drpdntest() { 
 
    $(".drpdn-click").click(function(e) { 
 

 
    var _drpdn_container = $(this).attr("data-drpdn-click"); 
 
    var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]'); 
 

 
    _drpdn_content.siblings().removeClass("drpdn-show"); 
 
    _drpdn_content.addClass("drpdn-show"); 
 
    $(_drpdn_content).click(function(event) { 
 
     event.stopPropagation(); 
 
    }); 
 
    $(document).click(function() { 
 
     _drpdn_content.removeClass("drpdn-show"); 
 
    }); 
 
    e.stopPropagation(); 
 
    }); 
 
} 
 
// Run Component Function 
 
$(document).ready(function() { 
 
    _drpdntest(); 
 
});

.drpdn-content { 
 
    z-index: 1000; 
 
    position: absolute; 
 
    display: none; 
 
    overflow: hidden; 
 
} 
 

 
.drpdn-content.drpdn-show { 
 
    display: block; 
 
}

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

 
<button class="drpdn-click" data-drpdn-click="main">CLICK</button> 
 
<div class="drpdn-content drpdn-body" data-drpdn-content="main"> 
 
    Main 
 
</div>

Answer 2

這應該是你想要什麼，根據你

現在在註釋中說節目在第一次點擊時，一個d當您點擊該選項時，它不會隱藏。

function _drpdntest() { 
 
    $(".drpdn-click").click(function() { 
 
    var $this = $(this) 
 
    var _drpdn_container = $(this).attr("data-drpdn-click"); 
 
    var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]'); 
 
    _drpdn_content.toggleClass("drpdn-show"); 
 
    $(document).click(function(event) { 
 
     if (event.target != $this[0] && event.target != _drpdn_content[0]) { 
 
     _drpdn_content.removeClass("drpdn-show"); 
 
     } 
 
    }); 
 
    $(this, _drpdn_content).click(function(event) { 
 
     event.stopPropagation(); 
 
    }); 
 
    }); 
 
} 
 
// Run Component Function 
 
$(document).ready(function() { 
 
    _drpdntest(); 
 
});

.drpdn-content { 
 
    z-index: 1000; 
 
    position: absolute; 
 
    display: none; 
 
    overflow: hidden; 
 
} 
 

 
.drpdn-content.drpdn-show { 
 
    display: block; 
 
}

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

 
<button class="drpdn-click" data-drpdn-click="main">CLICK</button> 
 
<div class="drpdn-content drpdn-body" data-drpdn-content="main"> 
 
    Main 
 
</div>