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

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()，因为在当前效果完成后执行回调函数。

＆＃13;

＆＃13;

$(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");
  }

}

＆＃13;

* {
    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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将$(".main-container").removeClass("black-bg");移至if (menu.hasClass('active')) {

$(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"); FROM HERE
    if (menu.hasClass('active')) {
      menu.removeClass('active');
      $(".main-container").removeClass("black-bg"); // TO HERE
    } 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 3

这是你在找什么？

$(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');
    } 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");
    });
  }

在这种情况下，黑匣子将保留在那里。你之前做的是你明确删除了黑盒子。