如何更改此jQuery，以便在默认情况下在992px以上的大小上打开切换？

Question

我需要更改此代码，以便在默认情况下，在992px以上的尺寸上展开切换，但仍然可以折叠，默认情况下折叠在尺寸下。

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'); 
    } 

}); 

Answer 1

你可以通过CSS做到这一点，这将更容易和更好的性能。

@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; 
    } 
} 

Answer 2

如果宽度小于992px，可以使用jQuery函数获取宽度并切换onload类。 使用下面提到的函数来获取宽度：

$(window).width();