1

При клике на button открывается список. Нужно чтобы при клике на документ и при клике на пункт списка, сам список скрывался.

Но код работает через раз. При первом открытии списка, кликаю на документ и список скрывается, но уже больше не появляется. + не исчезает если кликать на пункт списка.

Вопрос: Как правильно скрыть меню при при клике на пункт этого меню?

$(window).on("load resize", function(){
    //do something

    var width = $(document).width();

    if (width < 768){
        $('.btn-trigger').click( function(e){
            e.preventDefault();

            var
                $this = $(this),
                pj = $this.closest('.project');

            if(!pj.hasClass('open')){
                pj.addClass('open');
            }else{
                pj.removeClass('open');
            }

        });
    }else if (width > 768){
        $('.project').removeClass('open');
    }


});

$(document).mouseup(function (e) {
  var container = $('.project');
  if (container.has(e.target).length === 0){
    container.removeClass('open');
  }
});
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: none;
  align-items: center;
  align-content: center;
  justify-content: space-around;
  flex-flow: row nowrap;
  height: 40px;
  background: #ccc;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
}

.project {
  width: 100%;
  height: 100vh;
  padding-top: 150px;
  position: relative;
}

.btn-trigger {
  position: absolute;
  top:100px;
  left: 20px;
}

.open ul {
  display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<div class="project">
  <a href="#" class="btn-trigger">button</a>
  <ul>
    <li>
      <a href="#i-1" class="link">item-1</a>      
    </li>
    <li>
      <a href="google.com" class="link">item-2</a>
    </li>
    <li>
      <a href="#i-2" class="link">item-3</a>
    </li>
  </ul>
  
  
  <div id="i-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi quo, saepe blanditiis deleniti ipsum harum delectus asperiores distinctio atque natus aliquam vitae recusandae nobis, ea, voluptatum optio est tenetur praesentium quidem quibusdam nulla sint? Accusantium asperiores amet reiciendis esse quasi reprehenderit vero ipsa, obcaecati dicta labore, illum corporis ea aut aliquid eius, nesciunt natus, voluptatum! Illum delectus cum quibusdam sequi in officiis rem ab architecto tenetur, necessitatibus molestiae, dolor eligendi laborum facere et quaerat molestias ipsam, quisquam voluptatibus maiores debitis. Quis praesentium animi, ipsum dicta ducimus labore inventore eum itaque alias officiis delectus eveniet nisi quos iusto harum obcaecati sunt reprehenderit necessitatibus, quisquam modi. Accusamus, magnam culpa tempore commodi! Neque id quas cupiditate, veniam at culpa nihil, consequatur, itaque, quo cumque reiciendis qui sit. Suscipit atque fuga culpa voluptas, expedita, delectus incidunt iste debitis sunt, accusantium libero dolore tempora neque vitae aperiam laudantium distinctio eveniet praesentium. Nam nobis natus ipsa iure, reprehenderit eius quo officia quasi ut. Dolorem reiciendis blanditiis totam neque repudiandae minus omnis odio assumenda accusantium, magni ea vel, temporibus dolorum aspernatur sed eveniet tenetur exercitationem praesentium dicta rerum, culpa. Odio necessitatibus officiis error minima earum nemo iure vero commodi inventore consequuntur, doloremque alias, ipsum fugiat veniam perspiciatis!
  </div>
  
  <div id="i-2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic dolorum aperiam ex non excepturi aliquid itaque mollitia fugiat assumenda voluptatem nulla id iusto quis nemo sit molestias, temporibus corporis nostrum numquam iste, pariatur reprehenderit deserunt. Odio nihil distinctio voluptates error placeat nesciunt natus quasi, autem debitis illo eligendi nemo libero officia accusantium at quam magnam. Facere reprehenderit distinctio vitae corporis error unde consequatur ipsam, deserunt suscipit libero temporibus quam non vero vel, commodi enim magni corrupti dolore ab minus dolorum explicabo praesentium. Libero aperiam eos rem sint repellendus iure dolore minus hic, quasi, consectetur fuga voluptates necessitatibus. Vitae, quo. Velit!
  </div>
</div>

9
  • я Вам уже говорил, повторю еще раз: не назначайте обработчики событий внутри других обработчиков событий
    – user176262
    Commented 8 февр. 2017 в 16:24
  • Каждое выполнение строки $('.btn-trigger').click( function(e){ ... прикрепляет еще один обработчик. Все прикрепленные обработчики выполняются на click. При их четном количестве - выглядит так, что код ничего не делает.
    – user176262
    Commented 8 февр. 2017 в 16:30
  • 1
    или я это не Вам говорил? :)
    – user176262
    Commented 8 февр. 2017 в 16:42
  • @Igor, мне но все это не понятно! Да и ответ ваш не помог ничем
    – SVE
    Commented 8 февр. 2017 в 18:15
  • хорошо, объясните мне, пожалуйста, логику обработки события изменения размера окна - что должно происходить
    – user176262
    Commented 8 февр. 2017 в 19:09

1 ответ 1

1

Не следует назначать обработчики событий внутри других обработчиков событий - без веской на то причины.

Каждое выполнение строки $('.btn-trigger').click( function(e){ ... прикрепляет еще один обработчик. Все прикрепленные обработчики выполняются на click. При их четном количестве страница в результате выглядит так, как будто код ничего не делает.

Оставим пока resize вне рассмотрения:

$('.btn-trigger').click(function(e) {
  e.preventDefault();
  $(this).closest('.project').toggleClass('open');
});

$(".link").click(function(e) { 
  $(this).closest(".project").removeClass("open"); 
});

$(document).mouseup(function (e) {
  var container = $('.project');
  if (container.find('ul').has(e.target).length === 0 && 
      $(e.target).closest('.project ul').length === 0){
    container.removeClass('open');
  }
});
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: none;
  align-items: center;
  align-content: center;
  justify-content: space-around;
  flex-flow: row nowrap;
  height: 40px;
  background: #ccc;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
}

.project {
  width: 100%;
  height: 100vh;
  padding-top: 150px;
  position: relative;
}

.btn-trigger {
  position: absolute;
  top:100px;
  left: 20px;
}

.open ul {
  display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<div class="project">
  <a href="#" class="btn-trigger">button</a>
  <ul>
    <li>
      <a href="#i-1" class="link">item-1</a>      
    </li>
    <li>
      <a href="google.com" class="link">item-2</a>
    </li>
    <li>
      <a href="#i-2" class="link">item-3</a>
    </li>
  </ul>
  
  
  <div id="i-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi quo, saepe blanditiis deleniti ipsum harum delectus asperiores distinctio atque natus aliquam vitae recusandae nobis, ea, voluptatum optio est tenetur praesentium quidem quibusdam nulla sint? Accusantium asperiores amet reiciendis esse quasi reprehenderit vero ipsa, obcaecati dicta labore, illum corporis ea aut aliquid eius, nesciunt natus, voluptatum! Illum delectus cum quibusdam sequi in officiis rem ab architecto tenetur, necessitatibus molestiae, dolor eligendi laborum facere et quaerat molestias ipsam, quisquam voluptatibus maiores debitis. Quis praesentium animi, ipsum dicta ducimus labore inventore eum itaque alias officiis delectus eveniet nisi quos iusto harum obcaecati sunt reprehenderit necessitatibus, quisquam modi. Accusamus, magnam culpa tempore commodi! Neque id quas cupiditate, veniam at culpa nihil, consequatur, itaque, quo cumque reiciendis qui sit. Suscipit atque fuga culpa voluptas, expedita, delectus incidunt iste debitis sunt, accusantium libero dolore tempora neque vitae aperiam laudantium distinctio eveniet praesentium. Nam nobis natus ipsa iure, reprehenderit eius quo officia quasi ut. Dolorem reiciendis blanditiis totam neque repudiandae minus omnis odio assumenda accusantium, magni ea vel, temporibus dolorum aspernatur sed eveniet tenetur exercitationem praesentium dicta rerum, culpa. Odio necessitatibus officiis error minima earum nemo iure vero commodi inventore consequuntur, doloremque alias, ipsum fugiat veniam perspiciatis!
  </div>
  
  <div id="i-2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic dolorum aperiam ex non excepturi aliquid itaque mollitia fugiat assumenda voluptatem nulla id iusto quis nemo sit molestias, temporibus corporis nostrum numquam iste, pariatur reprehenderit deserunt. Odio nihil distinctio voluptates error placeat nesciunt natus quasi, autem debitis illo eligendi nemo libero officia accusantium at quam magnam. Facere reprehenderit distinctio vitae corporis error unde consequatur ipsam, deserunt suscipit libero temporibus quam non vero vel, commodi enim magni corrupti dolore ab minus dolorum explicabo praesentium. Libero aperiam eos rem sint repellendus iure dolore minus hic, quasi, consectetur fuga voluptates necessitatibus. Vitae, quo. Velit!
  </div>
</div>

3
  • codepen.io/semenchenko/pen/BpOvqP Можно ли как-то сделать, чтобы при клике в любом месте документа скрывалось меню?) ... на текст кликаю и не скрывается
    – SVE
    Commented 8 февр. 2017 в 19:45
  • пардон, не заметил, что div-ы с текстом находятся внутри div.project, сейчас
    – user176262
    Commented 8 февр. 2017 в 19:52
  • супер спасибо! Ну по "обработчиков внутри обработчиков" поняла что так делать нельзя ))
    – SVE
    Commented 8 февр. 2017 в 20:12

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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