Question

我想要实现的是以下

有两个带下拉列表的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的函数？如果是这样，有人可以帮我解决当前的例子吗？

由于

Answer 1

这里要遵循的路径是在项目上使用公共类，如果所有类名都具有相同的样式并且将执行相同的操作，则无需创建新的类名。检查一下：

$(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>

Answer 2

如果你想更具体，你可以为两个菜单分配一个类似的类，在下面的例子中，我添加了＆＃39; dropdown-div＆＃39;对于两个菜单的类，然后只要你点击一个非链接的东西就添加一个触发器，它会通过调用$（＆＃39; .dropdown-div＆＃39;）来隐藏菜单.hide（）; < / p>

＆＃13;

$(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);
    });

});

$(document).on('click', function(event) {
  if (!$(event.target).closest('a').length) {
   $(".dropdown-div").hide();
  }
});

＆＃13;

.first-div-dropdown, .second-div-dropdown{
    background-color:#555;
    color:white;
    height:100px;
    width:200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="first-div " style="display:inline-block">
<a class="first-div-link"><h6>REGION</h6></a>
        <div class="first-div-dropdown dropdown-div">
            <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 dropdown-div">
            <p>Drop down test from second DIV</p>
        </div>  
</div>

＆＃13;

Answer 3

您正在处理集合中的州管理。你有2个下拉，但有3个状态：下拉状态，下拉状态和下拉状态的集合。

使用jQuery，我见过的最常见的处理方法是每次“重置”集合的状态，通过隐藏点击的所有下拉列表。

然后，打开客户端定位的下拉列表。如果您使用单个类来定位集合，这也可以更容易一些，这也有助于在无限数量的下拉列表中重复使用。

<div class="first-div" style="display:inline-block">
    <a class="dropdown-trigger"><h6>REGION</h6></a>
    <div class="dropdown-menu">
        <p>Drop down test from first DIV</p>
    </div>
</div>

<div id="second-div" style="display:inline-block; float:right">
    <a class="dropdown-trigger"><h6>REGION</h6></a>
        <div class="dropdown-menu">
            <p>Drop down test from second DIV</p>
        </div> 
</div>

JS：

$('.dropdown-trigger').click(function (event) {
    event.stopPropagation();
    var $menu = $(this).siblings('.dropdown-menu');
    $('.dropdown-menu').not($menu).slideUp(300);
    $menu.slideToggle(300);
});


$(document).click(closeDropdowns);

function closeDropdowns () {
    $('.dropdown-menu').slideUp(300);
}

工作代码：http://codepen.io/amishstripclub/pen/wzbEVo

Answer 4

您可以尝试使用toggle，如下所示：

$(document).ready(function(){
  $('.first-div-link').on('click', function (event){
    $('.first-div-dropdown').toggle();
    $('.second-div-dropdown').toggle();
  });

  $('.second-div-link').on('click', function (event){
    $('.first-div-dropdown').toggle();
    $('.second-div-dropdown').toggle();
  });
});

在打开一个DIVS时关闭所有其他DIVS

4 个答案: