Нажмите на тот же элемент, чтобы закрыть и открыть раскрывающийся список только при закрытии предыдущего - PullRequest
Новая
       14

Нажмите на тот же элемент, чтобы закрыть и открыть раскрывающийся список только при закрытии предыдущего

0 голосов
/ 03 мая 2018

Мне нужно добавить 2 дополнительных функциональности к этой нави, которую я строю:

1 - Когда я нажимаю на активный элемент навигации, drop-down должен закрываться и класс .black-bg должен быть удален из основного контейнера, а также класс .active в nav вещь. На данный момент это работает только когда я нажимаю за пределами drop-down.

2 - Когда раскрывающийся список открыт, и вы щелкаете, чтобы открыть второй, второй придется ждать, пока первый не закроется. На данный момент обе анимации происходят одновременно.

См. Демонстрацию 

$(document).ready(function() {
  $(".click").on("click", function(evt) {
      evt.stopPropagation();
    if ($(this).hasClass("active")) {
      return;
    }
      $(".active").parent().find(".showup").slideToggle(200);
      $(".active").toggleClass("active");
      $(this).toggleClass("active");
      $(this).parent().find(".showup").slideToggle(200);
      if (!$(".main-container").hasClass("black-bg")) {
        $(".main-container").toggleClass("black-bg");
      }
  });
  $(".showup").on("click", function(evt) {
      evt.stopPropagation();
  });

});

$(document).on("click", function() {
    $(".active").parent().find(".showup").slideUp(50);
    $(".active").toggleClass("active");
    if ($(".main-container").hasClass("black-bg")) {
      $(".main-container").toggleClass("black-bg");
    }
});

Я действительно застрял на этом. Я надеюсь, что кто-то может мне помочь. Спасибо.

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Я предлагаю вам сделать что-то вроде этого:
(Смотрите комментарии в моем коде) 

// Added functions, because it's handy:
// Any global modification is to be made only there!
function menus_close() {
  $(".active").parent().find(".showup").slideUp(200); // 200 to better see it in action
  $(".active").removeClass("active");
  $(".main-container").removeClass("black-bg"); 
}

function menu_open(elm) {
  setTimeout(function() { // Fire the function after some time (see below)
    elm.addClass("active");
    elm.parent().find(".showup").slideDown(200);
    $(".main-container").addClass("black-bg");
  }, 200); // Here is the time
}

$(document).ready(function() {

  $(".click").on("click", function(evt) {
    evt.stopPropagation();
    if ($(this).hasClass("active")) {
      menus_close();
      return;
    }else{
      menus_close();
      menu_open($(this));
    }
  });

  $(".showup").on("click", function(evt) {
    evt.stopPropagation();
  });

});

$(document).on("click", function() {
  menus_close();
});
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

nav {
  width: 100%;
  /* modified to work in snippet */
  margin: auto;
  overflow: hidden;
  background: #424242;
}

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

.top-bar-section {
  float: right;
}

.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>
        </li>
        <li class="nav-item">
          <a href="#" class="click">Nav item 4</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
<div class="main-container">

</div>

Надеюсь, это поможет.

0 голосов
/ 03 мая 2018

Это отлично сработает.

Код ниже - это добавленное мной изменение. 

$(".click").on("click", function(evt) {
  evt.stopPropagation();
  var th = $(this);

  if (th.hasClass("active")) {
    th.removeClass("active");
    th.parent().find(".showup").slideUp(200);
    $(".main-container").removeClass("black-bg");
  } else {
    $(".active").removeClass("active");
    $(".showup").slideUp(200);
    $(".main-container").removeClass("black-bg");
    setTimeout(function() {
      th.addClass("active");
      th.parent().find(".showup").slideDown(200);
      $(".main-container").addClass("black-bg");
    }, 250);

  }

});

codepen ссылка

...