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

这应该是您想要的，基于您在评论中所说的内容

它现在在第一次点击时显示，当您点击该选项时它不会隐藏。

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>

Jquery下拉列表无法正常工作

2 个答案: