Question

我需要更改此代码，以便默认情况下，切换在大小超过992像素时展开，但仍可折叠，默认情况下会折叠为大小。

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();

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

2 个答案: