14

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>
Nesta
  • 988
  • 2
  • 16
  • 44
  • 1
    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. – Rory McCrossan May 25 '18 at 07:51
  • Sure however I need the black box to close when you click outside the nav or in the same nav button – Nesta May 25 '18 at 08:16

3 Answers3

7

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>
Albert Einstein
  • 7,472
  • 8
  • 36
  • 71
4

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>
Joseph Webber
  • 2,010
  • 1
  • 19
  • 38
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.

Aniruddh Agarwal
  • 900
  • 1
  • 7
  • 22