Question

我的代码中有一个令人困惑的错误，不知道如何解决它。我得到了主要功能，根据当前窗口大小调用脚本。

对于移动设备，我有一个slideToggle()功能，在移动设备上查看时可以正常工作。但是当打开600px以上时，会触发缩小函数，但slideToggle();不再起作用。

设置为display: block;并立即再次设置为display: none;。我的slideToggle();就像这样嵌入：

$('.box-header').on('click', function() {
  $(this).parent().toggleClass('folded').toggleClass('unfolded');
  $(this).next('div').stop().slideToggle();
  console.log('clicked');
});

JSFIDDLE DEMO

在查看演示时，重要的是在窗口大小超过600px时加载页面，然后缩小以重新创建问题。如果有效，请再试一次，因为它确实有效。

我错过了什么？在调整大小事件后，是否有更好的方法来杀死和调用脚本，具体取决于查看器视口？

Answer 1

将if放入点击事件：

  $('.box-header').on('click', function() {
    if ($(window).width() < 600) {
      $(this).parent().toggleClass('folded unfolded');
      $(this).next('div').stop().slideToggle();
    } else {
      //for other code here for medium+large screens
    }
  });

https://jsfiddle.net/5puqn9ts/1/

甚至使用类在移动和大屏幕之间切换，将点击事件绑定到每个

$(document).ready(function() {

    $('body').on('click', '.mobile', function() {
      $(this).parent().toggleClass('folded').toggleClass('unfolded');
      $(this).next('div').stop().slideToggle();
      console.log('clicked');
    });


  // init scripts for smartphone or desktops
  var initScripts = function() {
    if ($(window).width() < 600) {
      $('.box-header').addClass('mobile');
    }
    if ($(window).width() >= 600) {
      $('.box-header').removeClass('mobile');
      /add class for medium screen then bind event to ti
    }
  }
  initScripts();

  var id;
  $(window).resize(function() {
    initScripts()
  });
});

https://jsfiddle.net/75186j96/5/

Answer 2

您的功能会在每次通话中设置一个事件。试试这个正确的选择：

var smartphoneFunctions = $('.box-header').on('click', function() {
  $(this).parent().toggleClass('folded').toggleClass('unfolded');
  $(this).next('div').stop().slideToggle();
  console.log('clicked');
});

https://jsfiddle.net/75186j96/8/

Answer 3

要回答您的问题，您需要将slideToggle()目标调整为.box-content而不是抽象div，因为这会在.box-header上应用切换。您的班级切换也可以捆绑在一起。

结果代码如下：

$('.box-header').on('click', function() {
  $(this).parent().toggleClass('folded unfolded');
  $(this).next('.box-content').stop().slideToggle();
  console.log('clicked');
});

话虽如此，有更好的方法可以做到这一点。您可以将类绑定到.box-content的外观，如下所示：

.box-content {
    transition: height 300ms;
    overflow: hidden;
}

.box.folded .box-content {
    max-height: 0;
}

.box.unfolded .box-content {
    max-height: 300px;
}

slideToggle（）缩小后，函数不起作用

3 个答案: