如何在小屏幕上触发此jQuery移动导航脚本？

Question

My jQuery is not very good - I'm trying to learn by piecing together bits of existing scripts but not having very much luck. I'm trying to get a menu on a Wordpress website to act as a normal horizontal navigation bar on large screen sizes and to become a jQuery dropdown on widths below 980px - I've got the dropdown working but can't figure out how to get it to work only on small screen sizes.

The code that works is:

    <script type="text/javascript">
jQuery(document).ready(function($) {
    $("#mmenu").hide();
    $(".mtoggle").click(function() {
        $("#mmenu").slideToggle(500);
    });
});
</script>

But obviously it hides the horizontal navigation on large screen sizes too.

I've tried

    <script type="text/javascript">
jQuery(document).ready(function($) {
    if($(window).width() < 979) {
    $("#mmenu").hide();
    $(".mtoggle").click(function() {
        $("#mmenu").slideToggle(500);
    }
    });
});
</script>

but it seems to break the code completely and make it entirely non-functional and I can't figure out why.

The website in question is http://host26.qnop.net/~fpsl/ if seeing the menu in context would be helpful.

Any advice would be very much appreciated - thank you!

Answer 1

if you reindent the code you can see the problem... the if closes before the click handler function

here the corrected code:

<script type="text/javascript">
jQuery(document).ready(function($) {
  if($(window).width() < 979) {
    $("#mmenu").hide();
    $(".mtoggle").click(function() {
      $("#mmenu").slideToggle(500);
    });
  }
});
</script>

Answer 2

i tend to do

body:before{content:".";display:none;} (for desktop)
body:before{content:"..";display:none;} (for tablet)
body:before{content:"...";display:none;} (for mobile)

and then just query that, as CSS and Javascript have slightly different sizes when measuring the window.