The essence of the problem is as follows: there is something like a menu, and there are sub-items in the form of buttons. I want to make these sub-items disappear if the screen is less than 767px (otherwise, the buttons become a random column), and when I clicked on a menu item, they opened. The buttons themselves also have links in the form of lists that are hidden and that open when you click these buttons. This item works fine, but with the first trouble - I do not get any response to the click. On jQuery, I got the following code:

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

I hope, clearly explained the point, I hope for your advice! In JQuery, I am just starting to work, so I will accept any constructive criticism and remember how it should be. The rest of the code looks like this (on media querries display: none of the sub-items, of course):

 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 answer 1

    Do not be upset. This is a common mistake.

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

    Do you have classes in this script, by any chance?

    Imagine that the window is narrow and the resize event is triggered twice. The event $('.list-tenses').click added two handlers, each of which makes toggle . As a result, $('.open-list_tenses') will remain as it was.

     $('.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

    About the $(window).resize handler $(window).resize - in it you can write code with logic for this particular event. For example. The window was wide and the menu was visible. The window has been narrowed down and the menu has to be hidden. This should be in $(window).resize .

    • thank! I will try, until it turned out, but I see that everything works with an example - it means somewhere else screwed up. Strange, but there are no messages in the console at all, as if nothing is happening - Mikhail Ladonkin
    • Still, just to be sure: I understand correctly that $ (window). Resize (function () is removed completely? - Mikhail Ladonkin
    • understood why it didn’t work, it was display: none! important for buttons with the class .list-tenses. True, without an important display: none does not work, I don’t know how to interrupt the bootstrap styles without using important (I understand that you can write styles directly in html, but I only need for a specific media query) ... do you have any Any ideas on this? Thanks again for the previous tip! - Mikhail Ladonkin