如何更改此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();