Kun*_*ngh 3 html javascript css jquery
我试图关闭一个自定义jquery下拉单击外部下拉列表,就像HTML选择下拉列表的默认行为,我试图使用窗口单击,但这在创建自己的下拉列表时遇到麻烦.
$(".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
这对你来说很好:
在这个方法我用过 event.stopPropagation();
你的方法是正确的,它只是需要一些调整 - 我已经使用了click上<html>,但不同的是,我已经阻止了身体点击.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;
}<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>希望这有用.
| 归档时间： |
|
| 查看次数： |
159 次 |
| 最近记录： |