When click on second dropdown black box should remain visible

Question

In this dropdown nav I'm building if a dropdown is opened and you click to open a second one, the black box should remain visible. At the moment the black box disappears when you click on a second dropdown and reappears after the dropdown is completely opened.

Update

I also noticed the black box shows after a dropdown is open and it should open at the same time.

I hope this makes sense and thank you for your help!

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

Expertism

The .main-container element is always visible. The only reason the black background disappears/reappears is because you remove the black-bg class, then add it again. If you don't want the background to change, stop messing with that class. – Macknair

Sure however I need the black box to close when you click outside the nav or in the same nav button – Expertism

Answer 1

If you want black-bg being added once the menu is clicked, then do not remove and add black-bg class on every click event. Simply add it once if the menu have active class and remove it when menu do not active class. If you remove and add class on every click event then black-bg will first disappear and again it will appear. To black-bg at the time drop-down is open then remove $(".main-container").addClass("black-bg"); from callback function of slideDown() because a callback function is executed after the current effect is finished.

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

Ketti

Answer 2

Just move $(".main-container").removeClass("black-bg"); into 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>

Copeck

Answer 3

Is this what you are looking for?

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

The black box will remain there in this case. What you were previously doing was that you were removing black-box explicitly.

Polley