Question

在HTML下面用于容器。

如果屏幕尺寸大于768 ......两列布局
如果屏幕尺寸小于767 ...手风琴效果。

通过以下JS代码工作正常，如果我们保持屏幕小于767并刷新页面。但是，我需要一个基于屏幕调整大屏幕到小屏幕的工作解决方案。

请让我知道解决方案。

由于

HTML：

<div class="row" id="accordion">
    <div class="col-sm-12 col-md-6 col-lg-3">
      <h6 class="accordion-toggle">Frequently Ask Questions</h6>
      <ul class="accordion-content default">
        <li> <a href="">Carry with me?</a></li>
        <li> <a href="">Destination country?</a></li>
      </ul>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <h6 class="accordion-toggle">Corporate Info</h6>
      <ul class="accordion-content">
        <li> <a href="">Careers</a></li>
        <li> <a href="">Press Room</a></li>
      </ul>
    </div>
 </div>

JS：

if ($(window).width() < 767) {
    $('#accordion').find('.accordion-toggle').click(function () {
        //Expand or collapse this panel
        $(this).next().slideToggle('fast');
        //Hide the other panels
        $('.accordion-content').not($(this).next()).slideUp('fast');
    });
}

Answer 1

您需要将代码放在window.resize事件中，如@karthnik VU所说

更新

$('#accordion.small').on('click', '.accordion-toggle', function() {
  //Expand or collapse this panel
  $(this).next().slideToggle('fast');
  //Hide the other panels
  $('.accordion-content').not($(this).next()).slideUp('fast');
});

function resizer(){ 
    $('#accordion').toggleClass('small' , $(window).width() < 767);
    if ($(window).width() >= 767) { 
      $("#accordion").find('.accordion-content').show();
    }
}

$(window).on('resize', resizer).resize();

Answer 2

如果我理解正确几乎所有这些都可以用css实现。显然你正在使用bootstrap，所以你可以使用一些visibility classes来显示/隐藏某些窗口大小。此外，您可以查看针对不同屏幕尺寸的不同外观的navbar示例。只需调整页面大小即可查看。希望这有帮助

Answer 3

您需要一个调整大小的侦听器，并且需要检测用户何时从大到小以及从小屏幕变为大屏幕。我没有测试我的代码，但它可能看起来像这样：

var lastWindowWidth;
$(document).ready(function() {
    $(window).resize(function() {
      var $window = $(this),
          windowWidth = $window.width();

      if (windowWidth < 767 && lastWindowWidth>=768) {

        //accordionify

      } else if (windowWidth >= 768 && lastWindowWidth < 767) {

        //remove accordion
      }

      lastWindowWidth = windowWidth;
    });
});

但我认为你也可以使用普通的css（bootstrap helper classes）实现这种行为

基于屏幕调整大小（而不是页面刷新）进行检测

3 个答案: