1

Суть проблемы в следующем: есть что-то типа меню, и есть подпункты в виде кнопок. Я хочу сделать так, чтобы эти подпункты исчезали, если экран меньше 767px (иначе кнопки становятся в рандомном порядке столбиком), а при клике на пункт меню они открывались. Сами кнопки также имеют ссылки в виде списков, которые скрыты, и которые открываются при нажатии этих кнопок. Этот пункт срабатывает отлично, а вот с первым беда - никакой реакции на клик я не получаю. На JQuery код у меня получился следующий:

 '$( window ).resize(function() {
 if($(window).width() <=767) 

  $('.list-tenses').click(function(){
  $('.open-list_tenses').slideToggle();
  });
  });'

Надеюсь, понятно объяснил суть, надеюсь на ваши советы! В JQuery только начинаю работать, поэтому любую конструктивную критику приму и запомню, как нужно. Остальной код выглядит так (на media querries display:none у подпунктов, конечно):

function openListPerfect() {
  var list = document.getElementById("openListPerfect");

  if (list.style.display == "block") {
    list.style.display = "none";
  } else {
    list.style.display = "block";
  }
}

function openListSimple() {
  var list = document.getElementById("openListSimple");

  if (list.style.display == "block") {
    list.style.display = "none";
  } else {
    list.style.display = "block";
  }
}
.hidden-links {
  display: none;
}
<div class="row justify-content-center">
  <div class="col-md-3">
    <div class="title-groups open-list_tenses">
      <h5>Tenses</h5>
    </div>
  </div>
</div>
<div class="row justify-content-center">
  <div class="col-md-3">
    <h5 id="list" onclick="openListSimple()" class="btn btn-outline-secondary list-tenses">Present Simple</h5>
  </div>
  <div class="col-md-3">
    <h5 id="list" onclick="openListPerfect()" class="btn btn-outline-secondary list-tenses">Present Perfect</h5>
  </div>
</div>
<div class="row justify-content-center">
  <div class="col-md-3">
    <ul class="hidden-links list-unstyled" id="openListSimple">
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/BRSLQPehUg7/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Rules and Myths Part 1</a></li>
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/BRUwQ5-h2Gh/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Rules and Myths Part 2</a></li>
    </ul>
  </div>
</div>
<div class="row justify-content-center">
  <div class="col-md-3">
    <ul class="hidden-links list-unstyled" id="openListPerfect">
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/BdpnOmChaLI/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Rules</a></li>
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/BhDoUDrh3Ve/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Present Perfect (all cases)</a></li>
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/BfgHErbBjN8/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Experience</a></li>
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/Be11EY8hyPJ/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Always/Never</a></li>
    </ul>
  </div>
</div>

1 ответ 1

0

Не растраивайтесь. Это частая ошибка.

$( window ).resize(function() {
  if($(window).width() <= 767) 
    $('.list-tenses').click(function(){
      $('.open-list_tenses').slideToggle();
    });
});

У Вас в этом скрипте, случайно, классы не перепутаны?

Представьте, что окно узкое, и событие resize вызвалось дважды. На событие $('.list-tenses').click добавлено два обработчика, каждый из которых делает toggle. В результате $('.open-list_tenses') останется каким был.

$('.list-tenses').click(function(){
  if($(window).width() <= 767) {
     $('.open-list_tenses').slideToggle();
  }
});

function openListPerfect() {
  var list = document.getElementById("openListPerfect");

  if (list.style.display == "block") {
    list.style.display = "none";
  } else {
    list.style.display = "block";
  }
}

function openListSimple() {
  var list = document.getElementById("openListSimple");

  if (list.style.display == "block") {
    list.style.display = "none";
  } else {
    list.style.display = "block";
  }
}

$('.open-list_tenses').click(function(){
  if($(window).width() <= 767) {
    $('.list-tenses').slideToggle();
  }
});
.hidden-links {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row justify-content-center">
  <div class="col-md-3">
    <div class="title-groups open-list_tenses">
      <h5>Tenses</h5>
    </div>
  </div>
</div>
<div class="row justify-content-center">
  <div class="col-md-3">
    <h5 id="list" onclick="openListSimple()" class="btn btn-outline-secondary list-tenses">Present Simple</h5>
  </div>
  <div class="col-md-3">
    <h5 id="list" onclick="openListPerfect()" class="btn btn-outline-secondary list-tenses">Present Perfect</h5>
  </div>
</div>
<div class="row justify-content-center">
  <div class="col-md-3">
    <ul class="hidden-links list-unstyled" id="openListSimple">
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/BRSLQPehUg7/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Rules and Myths Part 1</a></li>
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/BRUwQ5-h2Gh/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Rules and Myths Part 2</a></li>
    </ul>
  </div>
</div>
<div class="row justify-content-center">
  <div class="col-md-3">
    <ul class="hidden-links list-unstyled" id="openListPerfect">
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/BdpnOmChaLI/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Rules</a></li>
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/BhDoUDrh3Ve/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Present Perfect (all cases)</a></li>
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/BfgHErbBjN8/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Experience</a></li>
      <li class="hidden-links_list"><a href="https://www.instagram.com/p/Be11EY8hyPJ/?hl=ru&taken-by=thepalms.blog" target="_blank" class="blog-links">Always/Never</a></li>
    </ul>
  </div>
</div>

Update

Насчет обработчика $(window).resize - в нем Вы можете написать код с логикой именно для этого события. Например. Окно было широкое, и меню было видимое. Окно сузили, и меню надо спрятать. Вот это должно быть в $(window).resize.

3
  • спасибо! Буду пробовать, пока не получилось, но вижу, что на примере все работает - значит, где-то еще напортачил. Странно, но в консоли вообще никаких сообщений нет, как будто и не происходит ничего 1 сен 2018 в 4:45
  • еще, просто, чтобы наверняка: я правильно понимаю, что $( window ).resize(function() убирается совсем? 1 сен 2018 в 4:59
  • понял, почему не работало, стояло display:none!important у кнопок с классом .list-tenses. Правда, без important display:none не работает, не знаю, как перебить стили bootstrap без использования important (понимаю, что можно прямо в html прописать стили, но мне нужно только для определенного медиа-запроса)...есть ли у Вас какие-нибудь идеи по этому поводу? Еще раз спасибо за предыдущий совет! 1 сен 2018 в 9:34

Ваш ответ

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

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