I need to have menu items disabled in mobile

Question

This is my code for my mobile navigation.

//For Mobile Menu:
<style>
jQuery(document).ready(function(){
      $(".menuclick").click(function(event) {
        event.preventDefault();
        $(".menu_box").slideToggle("fast");
            return false;
      });
});
</style>

I need the list that appears to not be visible in mobile until the mobile menu button is clicked.

Does anyone have a quick fix for this?

Answer 1

Best would be hide it using css , just add style or a class with display:none to the element

OR

You can do trigger click event after you bind click event, that will hide menu_box

jQuery(document).ready(function(){
      $(".menuclick").click(function(event) {
          event.preventDefault();
          $(".menu_box").slideToggle("fast");
      });
}).trigger('click');

Also use either event.preventDefault(); or return false;

Answer 2

您需要显示：无，然后切换即可完成其余工作。

<div class="menu_box" style="display:none"></div>

Answer 3

You could either have a default style display:none on the element, or use JavaScript or jQuery.

CSS way:

.menu_box { display:none; }

jQuery:

$(".menu_box").css("display","none");

Mandatory vanilla solution:

Grab all elements by class, iterate the array of elements, and apply the style.

var x = document.getElementsByClassName("menu_box");
for (var i=0;i<x.length;i++) x[i].style.display = "none";