2

Сделал кнопку которая открывает и закрывает контент. Так же сделал, что если клик был произведен не по контенту, блок контента закрывается. Но проблема в том, что сделав закрытие если клик был вне блока контента, кнопка "открыть/закрыть" перестает работать на закрытие. Не пойму в чем проблема.

Пример тут: codepen

$(function() {
  var $togglers = $(".js-deps-popup");

  return $togglers.on("click", function() {
    var $this = $(this),
      $item = $this.next(".dep"),
      $active = $(".dep_show");

    $item.toggleClass("dep_show");
    return $active.removeClass("dep_show");
  });
});

$(function() {
  $(document).mouseup(function(e) {
    var $togglersPopup = $(".dep__popup");
    if (
      !$togglersPopup.is(e.target) &&
      $togglersPopup.has(e.target).length === 0
    ) {
      $(".dep").removeClass("dep_show");
    }
  });
});
body {
  font-size: 11px;
}

.deps__list {
  display: flex;
}
.deps__item {
  border: 1px solid;
  padding: 20px;
}

.dep__popup {
  display: none;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid;
}
.dep_show .dep__popup {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="deps__list">
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 1</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 2</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 4</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 4</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

5
  • зачем тут вообще эти return'ы? Они вообще на что-то влияют?
    – InDevX
    4 мая 2019 в 21:22
  • ну раз вы юзаете jquery неужели так сложно открыть документацию и посмотреть на toogle? Чем писать такой бред, который у вас.
    – And
    5 мая 2019 в 3:41
  • Я знаю как работает toggle, если бы мне нужен был только он, вопроса не было бы.
    – ink Shio
    5 мая 2019 в 8:49
  • Вам нужен именно и только он. Другого вам тут и не нужно вообще, вы нагородили огород, за место простого toogle.
    – And
    5 мая 2019 в 20:48
  • Нет, не только тугле. Простым toggle поведение которое нужно было не сделать. Помимо обычного открытия/закрытия, нужно было, что бы предыдущий активный элемент закрывался, а новый открывался. Плюс если клик был совершен не по блоку который был открыт, так же закрыть активный элемент. Об этом и был вопрос.
    – ink Shio
    6 мая 2019 в 13:49

1 ответ 1

0

$(function() {
  var $togglers = $(".js-deps-popup");

  return $togglers.on("click", function(e) {
    var $this = $(this),
      $item = $this.next(".dep"),
      $active = $(".dep_show");

    $item.toggleClass("dep_show");
    $active.removeClass("dep_show");
    e.stopPropagation();
  });
});

$(function() {
  $(document).click(function(e) {
    var $togglersPopup = $(".dep__popup");
    if (!$togglersPopup.is(e.target) &&
      $togglersPopup.has(e.target).length === 0
    ) {
      $(".dep").removeClass("dep_show");
    }
  });
});
body {
  font-size: 11px;
}

.deps__list {
  display: flex;
}

.deps__item {
  border: 1px solid;
  padding: 20px;
}

.dep__popup {
  display: none;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid;
}

.dep_show .dep__popup {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="deps__list">
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 1</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 2</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 4</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 4</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.