How to change this jQuery so that the toggle is open by default on sizes above 992px?

问题

I need to change this code so that the toggle is expanded by default on sizes above 992px but still collapsible, and collapsed by default on sizes under that.

jQuery(document).ready(function($) {

  $("a.search-trigger").click(function(e) {
    e.preventDefault();
    $(this).toggleClass('advanceOpen');
    if ($(this).hasClass('advanceOpen')) {
      $(this).html('Basic Search');
    } else {
      $(this).html('Advanced Search');
    }

    $("#searchPanel--advanceSearch").toggle();
  });

  $("a.search-trigger").keyup(function(e) {
    e.preventDefault();
    if (e.which == 13) $("a.search-trigger").click();
  });

  console.log('test');
  $('.ruFileInput').focus(function() {
    console.log('test1');
    $(this).parent.find('.ruBrowse').addClass('ruButtonHover');
  });
  $('.ruBrowse').click(function() {
    console.log('test2');
    $(this).parent.find('.ruFileInput').trigger('click');
  });
  $("a.search-trigger-employee").toggleClass('advanceOpen');
  if ($("a.search-trigger-employee").hasClass('advanceOpen')) {
    $("a.search-trigger-employee").html('Basic Search');
    $("#searchPanel--advanceSearch").toggle();
    $('.genericPanel--search .inputBox').attr('placeholder', 'Search for staff');
  }

});

回答1:

You can do that by CSS, that will much easier and good performance as well.

@media only screen and (min-width: 992px) {
    #your-toggle-goes-here {
        display:block;
    }
    /*or just use additional class, and you can toggle it*/
    .your-toggling-class{
        display:block;
    }
}

回答2:

You can use jQuery function to get the width and toggle the class onload if width is less that 992px. Use the below mentioned function to get width :

$( window ).width();

来源：https://stackoverflow.com/questions/41176878/how-to-change-this-jquery-so-that-the-toggle-is-open-by-default-on-sizes-above-9