我想要实现的是以下内容
有两个带下拉列表的DIVS。我需要在打开另一个单击功能时关闭一个。
一旦事件不在下拉框中，我也试图将鼠标移出。
一旦点击甚至发生在下拉框之外，我想关闭DIV。
以下是HTML
<div class="first-div" style="display:inline-block">
<a class="first-div-link"><h6>REGION</h6></a>
<div class="first-div-dropdown">
<p>Drop down test from first DIV</p>
</div>
</div>
<div id="second-div" style="display:inline-block; float:right">
<a href="#" class="second-div-link"><h6>REGISTER</h6></a>
<div class="second-div-dropdown">
<p>Drop down test from second DIV</p>
</div>
</div>
CSS正在关注
.first-div-dropdown, .second-div-dropdown{
background-color:#555;
color:white;
height:100px;
width:200px;
}
JS正在关注
$(document).ready(function(){
$('.first-div-dropdown').hide();
$('.second-div-dropdown').hide();
$('.first-div-link').on('click', function (event){
$('.first-div-dropdown').slideDown(300);
});
$('.second-div-link').on('click', function (event){
$('.second-div-dropdown').slideDown(300);
});
});
有什么方法可以将此功能用作控制HTML中的多个DOM的功能吗？如果可以的话，有人可以在当前示例中为我提供帮助吗？
谢谢
这里要遵循的路径是在项目上使用通用类，如果所有类都具有相同的样式并执行相同的操作，则无需创建新的类名。检查一下：
$(document).ready(function() {
$('.cont-div').on('click', 'a', function(e) {
e.preventDefault();
$('.div-dropdown').slideUp(300);
$(this).next('.div-dropdown').stop().slideToggle(300);
});
//To close if you click outside the container divs
$('body').on('click', function(e) {
if (!$(e.target).parents('.cont-div').length) {
$('.div-dropdown').slideUp(300);
}
})
});body {
height: 600px;
background: #e1e1e1;
}
.cont-div {
display: inline-block;
vertical-align: top;
width: 50%;
}
.div-dropdown {
background-color: #555;
color: white;
height: 100px;
width: 200px;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont-div">
<a href="#"><h6>REGION</h6></a>
<div class="div-dropdown">
<p>Drop down test from first DIV</p>
</div>
</div><!--
--><div class="cont-div">
<a href="#"><h6>REGISTER</h6></a>
<div class="div-dropdown">
<p>Drop down test from second DIV</p>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句