Question

我正在使用带有手风琴的Bootstrap 3来显示页面内容。我有一个Jquery脚本，当面板打开时，它使用scrollTop动画面板标题到屏幕顶部。该脚本工作得很好，但是当屏幕宽度小于480时，我无法弄清楚如何使它成功。我知道我也需要注意屏幕调整大小事件。

$('#collapse-slide-line-tabs').on('shown.bs.collapse', function () {
var panel = $(this).find('.panel-collapse.in');

$('body').animate({
    scrollTop: panel.offset().top - 114
}, 200);return false;
});

以下是我最近的非工作尝试。

$(document).ready(function(){
$('#collapse-slide-line-tabs').on('shown.bs.collapse', function () {
    if ($(window).width() < 480) {
        $('body').animate({
            scrollTop: panel.offset().top - 114
            }, 200);return false;
    }
});
});

我似乎无法弄清楚我哪里出错了？

---更新以下 -

将窗口宽度条件移到函数调用之外似乎解决了我的第一个问题。

if ($(window).width() < 480) {
$('#collapse-slide-line-tabs').on('shown.bs.collapse', function () {

  var panel = $(this).find('.panel-collapse.in');

  $('body').animate({
        scrollTop: panel.offset().top - 114
  }, 200);return false;});

}

我仍然在努力杀死窗口大小调整到宽度大于480的函数

$(window).on('resize', function() {

if ($(window).width() < 480) {
  $('#collapse-slide-line-tabs').on('shown.bs.collapse', function () {

  var panel = $(this).find('.panel-collapse.in');

    $('body').animate({
          scrollTop: panel.offset().top - 114
    }, 500);return false;});

    } else {
    $('body').animate.stopPropagation();}

});

（请注意，我正在使用两种不同的动画速度来帮助确定在我测试时哪些脚本会影响内容）

Bootstrap3仅在屏幕宽度低于480时才执行Jquery功能

0 个答案: