Question

我正在尝试关闭下拉列表外部的自定义jquery下拉列表，就像HTML select下拉列表的默认行为一样，我尝试使用单击窗口，但这会在打开自己的下拉列表时遇到麻烦。

$(".selected").click(function() {
  $(".custom-dropdown-list").toggleClass("open");
});

$(".custom-dropdown-list li").click(function() {
  var dataVal = $(this).attr("data-val");
  var dpText1 = $(this).children('.dp-val1').text();
  var dpText2 = $(this).children('.dp-val2').text();
  $(".selected").attr("data-val", dataVal);
  $(".selected .dp-val1").text(dpText1);
  $(".selected .dp-val2").text(dpText2);
  $(".custom-dropdown-list").removeClass("open");
});

.custom-dropdown {
  width: 300px;
}

.selected {
  padding: 5px;
  cursor: pointer;
  min-height: 37px;
  background-color: #ccc;
}

.custom-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.custom-dropdown-list.open {
  display: block;
}

.custom-dropdown-list li {
  padding: 5px;
  cursor: pointer;
}

.custom-dropdown-list li:hover {
  background: #f2f2f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
  <div class="selected" data-val="">
    <div class="dp-val1">
      Selected Bank</div>
    <div class="dp-val2">
    </div>
  </div>
  <ul class="custom-dropdown-list">
    <li data-val="0">
      <div class="dp-val1">Option Dp0</div>
      <div class="dp-val2">5879464954426 (LKP)</div>
    </li>
    <li data-val="1">
      <div class="dp-val1">Option Dp1</div>
      <div class="dp-val2">5879464954426 (LKP)</div>
    </li>
    <li data-val="2">
      <div class="dp-val1">Option Dp2</div>
      <div class="dp-val2">5879464954426 (LKP)</div>
    </li>
    <li data-val="3">
      <div class="dp-val1">Option Dp3</div>
      <div class="dp-val2">5879464954426 (LKP)</div>
    </li>
    <li data-val="4">
      <div class="dp-val1">Option Dp4</div>
      <div class="dp-val2">5879464954426 (LKP)</div>
    </li>
  </ul>
</div>

的jsfiddle

https://jsfiddle.net/5zgyouwL/1/

Answer 1

这适用于您：

在这种方法中，我使用了event.stopPropagation();

你的方法是正确的，它只是需要一些调整 - 我使用了click上的<html>，但区别在于我阻止了身体点击{{1 {}}和.selected使用.custom-dropdown-list li。

event.stopPropagation();

$("html").click(function(event) {
  $(".custom-dropdown-list").removeClass("open");
});

$(".selected").click(function() {
  event.stopPropagation();
  $(".custom-dropdown-list").toggleClass("open");
});


$(".custom-dropdown-list li").click(function() {
  event.stopPropagation();
  var dataVal = $(this).attr("data-val");
  var dpText1 = $(this).children('.dp-val1').text();
  var dpText2 = $(this).children('.dp-val2').text();
  $(".selected").attr("data-val", dataVal);
  $(".selected .dp-val1").text(dpText1);
  $(".selected .dp-val2").text(dpText2);
  $(".custom-dropdown-list").removeClass("open");
});

.custom-dropdown {
  width: 300px;
}

.selected {
  padding: 5px;
  cursor: pointer;
  min-height: 37px;
  background-color: #ccc;
}

.custom-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.custom-dropdown-list.open {
  display: block;
}

.custom-dropdown-list li {
  padding: 5px;
  cursor: pointer;
}

.custom-dropdown-list li:hover {
  background: #f2f2f2;
}

希望这有用。

Answer 2

我认为你可能想要的是当点击自定义选择/下拉列表的任何其他地方时它必须关闭。

所以这是：

$(".selected").click(function(){
		$(".custom-dropdown-list").toggleClass("open");
});

$(".custom-dropdown-list li").click(function(){
    var dataVal = $(this).attr("data-val");
    var dpText1 = $(this).children('.dp-val1').text();
    var dpText2 = $(this).children('.dp-val2').text();    
    $(".selected").attr("data-val", dataVal);
    $(".selected .dp-val1").text(dpText1);
    $(".selected .dp-val2").text(dpText2);
		$(".custom-dropdown-list").removeClass("open");  
});

/*Mouse click anywhere but custom select dropdown, will close it. */
$(document).mouseup(function (e) {
	var container = $(".custom-dropdown");
	if (!container.is(e.target) && container.has(e.target).length === 0) {
        $(".custom-dropdown-list").removeClass("open");
    }
});

.custom-dropdown { width:300px;}
.selected { padding:5px; cursor:pointer; min-height:37px; background-color:#ccc;}
.custom-dropdown-list { list-style:none; padding:0; margin:0; display:none;}
.custom-dropdown-list.open {  display:block;}
.custom-dropdown-list li { padding:5px; cursor:pointer;}
.custom-dropdown-list li:hover { background:#f2f2f2;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954466 (LKP)</div> 
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
</ul>
</div>

Answer 3

关键是Event.stopPropagation()

$('body').on('click', function(){
    // close the drop down
});

$('.custom-dropdown').on('click', function(e){
    e.stopPropagation();    
});

Answer 4

你使用Mouse Up Event也喜欢这个

$(document).mouseup(function(e) 
{
    var container = $(".custom-dropdown");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

Answer 5

我相信@weBer已回答了您的问题，但另一种方法是在您的html元素上设置一个事件处理程序，并检查是否点击了目标元素或其子元素：

$('html').on('click' , function(e){
   if($(e.target).closest('.custom-dropdown').length ) return 
   $(".custom-dropdown-list").toggleClass("open");
});

FIDDLE HERE

如何使用默认选择下拉列表关闭自定义jquery下拉列表

5 个答案: