单击第二个下拉列表时,黑色框应保持可见

Question

在这个下拉导航中,我正在构建如果打开一个下拉列表,然后单击打开第二个,黑框应保持可见.当您点击第二个下拉列表时黑盒消失,并在下拉列表完全打开后重新出现.

更新

我还注意到下拉列表打开后黑框显示,它应该同时打开.

我希望这是有道理的,谢谢你的帮助!

$(document).ready(function() {
  $(".click").on("click", function(e) {
    var menu = $(this);
    toggleDropDown(menu);
  });

  $(document).on('mouseup',function(e) {
    var container = $("nav .top-bar-section ul");


    // 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) {
      $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
        $(".main-container").removeClass("black-bg");
        if ($('a.active').hasClass('active')) {
          $('a.active').removeClass('active');
        }
      });
    }
  });

});


function toggleDropDown(menu) {
  var isActive = $('a.active').length;
  $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
    $(".main-container").removeClass("black-bg");
    if (menu.hasClass('active')) {
      menu.removeClass('active');
    } else {
      $('a.active').removeClass('active');
      menu.addClass('active');
      menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
        $(".main-container").addClass("black-bg");
      });
    }
  });
  if (!isActive) {
    menu.addClass('active');
    menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
      $(".main-container").addClass("black-bg");
    });
  }

}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.nav-wrapper {
    width: 100%;
    overflow: hidden;
    background: #424242;
}

nav {
    width: 1024px;
    margin: auto;
    overflow: hidden;
    background: #424242;
}

.nav-content {
    width: 100%;
    z-index: 999;
    background: #ccc;
}

.top-bar-section {
    float: left;
}
.top-bar-section a.active {
    background: #f00;
}


.showup {
    display: none;
    background: #ccc;
    position: absolute;
    width: 100%;
    top: 70px;
    left: 0;
    z-index: 99;
    padding: 30px 15px 30px 20px;
}

p {
    font-size: 14px;
    line-height: 1.4;
}

li.nav-item {
    display: inline-block;
    background: #f5f5f5;
}
li.nav-item a {
    display: block;
    text-decoration: none;
    padding: 10px;
}
.main-container {
    width: 80%;
    height: 400px;
    margin: auto;
}
.black-bg {
    background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
  <nav>
    <div class="top-bar-section">
      <ul>
        <li class="nav-item">
          <a href="#" class="click">Nav item 1</a>
          <div class="showup">
            <div class="nav-content">
              <p>
                Dropdown for Nav Item 1.
              </p>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="click">Nav item 2</a>
          <div class="showup">
            <div class="nav-content">
              <p>
                Dropdown for Nav Item 2.
              </p>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="click">Nav item 3</a>
          <div class="showup">
            <div class="nav-content">
              <p>
                Dropdown for Nav Item 3.
              </p>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="click">Nav item 4</a>
          <div class="showup">
            <div class="nav-content">
              <p>
                Dropdown for Nav Item 4.
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<div class="main-container">

</div>

Answer 1

如果要black-bg在单击菜单后添加,则不要删除black-bg每个单击事件并添加类.如果菜单有active类,只需添加一次,当菜单不active上课时将其删除.如果您在每次点击活动中删除并添加课程,那么black-bg它将首先消失并再次出现.到black-bg当时下拉打开然后$(".main-container").addClass("black-bg");从回调函数中删除,slideDown()因为在当前效果完成后执行回调函数.

$(document).ready(function() {
  $(".click").on("click", function(e) {
    var menu = $(this);
    toggleDropDown(menu);
  });

  $(document).on('mouseup',function(e) {
    var container = $("nav .top-bar-section ul");


    // 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) {
      $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
        $(".main-container").removeClass("black-bg");
        if ($('a.active').hasClass('active')) {
          $('a.active').removeClass('active');
        }
      });
    }
  });

});


function toggleDropDown(menu) {
  var isActive = $('a.active').length;
  $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
    if (menu.hasClass('active')) {
      menu.removeClass('active');
      $(".main-container").removeClass("black-bg");
    } else {
      $('a.active').removeClass('active');
      menu.addClass('active');
      menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
       });
    }
  });
  if (!isActive) {
    menu.addClass('active');
    menu.parent().find('.showup').stop(true, true).slideDown(500);
    $(".main-container").addClass("black-bg");
  }

}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.nav-wrapper {
    width: 100%;
    overflow: hidden;
    background: #424242;
}

nav {
    width: 1024px;
    margin: auto;
    overflow: hidden;
    background: #424242;
}

.nav-content {
    width: 100%;
    z-index: 999;
    background: #ccc;
}

.top-bar-section {
    float: left;
}
.top-bar-section a.active {
    background: #f00;
}


.showup {
    display: none;
    background: #ccc;
    position: absolute;
    width: 100%;
    top: 70px;
    left: 0;
    z-index: 99;
    padding: 30px 15px 30px 20px;
}

p {
    font-size: 14px;
    line-height: 1.4;
}

li.nav-item {
    display: inline-block;
    background: #f5f5f5;
}
li.nav-item a {
    display: block;
    text-decoration: none;
    padding: 10px;
}
.main-container {
    width: 80%;
    height: 400px;
    margin: auto;
}
.black-bg {
    background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrapper">
  <nav>
    <div class="top-bar-section">
      <ul>
        <li class="nav-item">
          <a href="#" class="click">Nav item 1</a>
          <div class="showup">
            <div class="nav-content">
              <p>
                Dropdown for Nav Item 1.
              </p>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="click">Nav item 2</a>
          <div class="showup">
            <div class="nav-content">
              <p>
                Dropdown for Nav Item 2.
              </p>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="click">Nav item 3</a>
          <div class="showup">
            <div class="nav-content">
              <p>
                Dropdown for Nav Item 3.
              </p>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="click">Nav item 4</a>
          <div class="showup">
            <div class="nav-content">
              <p>
                Dropdown for Nav Item 4.
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<div class="main-container">

</div>