Question

所以我开始即兴创作我的一个旧网站，但却陷入了一个jquery问题。我创建了一个按钮，当浏览器的宽度小于768px时，通过使用bootstrap“visible-xs”类显示。使用jQuery我试图在浏览器大小小于768px时隐藏数据。总而言之，当浏览器小于或“重新设置”小于768px时，将出现按钮并隐藏数据。单击按钮时，数据应使用slideToggle切换。但问题是我无法切换数据。

$(document).ready(function() {
  $(window).resize(function() {
    if ($(window).width() < 768) {
      $(".toggle-this").hide();
      $(".show-hide-button").click(function() {
        $(".toggle-this").slideToggle(500);
      });
    } else {
      $(".toggle-this").show();
    }
  });
  if ($(window).width() < 768) {
    $(".toggle-this").hide();
    $(".show-hide-button").click(function() {
      $(".toggle-this").slideToggle(500);
    });
  }
});

<button type="button" class="btn btn-primary show-hide-button visible-xs">Show More</button>

<div class="toggle-this">
  Lorem ipsum dolor ...
</div>

在调整大小功能之外写入$(window).width() < 768px也会导致数据隐藏在浏览器调整大小时，但刷新后数据会显示回来。 slideToggle似乎对代码没有任何影响。

我该如何实现这个目标？

Answer 1

您的jquery选择器中存在语法错误。您可以在下面找到正确的代码：

$(document).ready(function() {
    $(window).resize(function() {
        if ($(window).width() < 768) {
            $(".toggle-this").hide();
            $(".show-hide-button").click(function() {
                $(".toggle-this").slideToggle(500);
            });
        } else {
            $(".toggle-this").show();
        }
    });
   if ($(window).width() < 768) {
       $(".toggle-this").hide();
       $(".show-hide-button").click(function() {
          $(".toggle-this").slideToggle(500);
       });
   }
});

HTML：

<button type="button" class="btn btn-primary show-hide-button visible-xs">Show More</button>
<div class="toggle-this">Lorem ipsum dolor ...</div>

Answer 2

好的，这里有两件事：

当浏览器调整大小时，您每次都在click按钮上绑定$(".show-hide-button")事件。这将导致多个事件绑定相同的按钮。因此，在调整大小后保持显示/隐藏部分，并将事件绑定移到其外部并仅执行一次（可能在文档就绪）。

您不应该使用jQuery / JavaScript显示/隐藏它。 CSS媒体查询就足够了。 bootstrap 中的足够类已经写好了。试试这个：

试试这段代码：

<button type="button" class="btn btn-primary show-hide-button visible-xs" aria-expanded="true" data-toggle="collapse" data-target="#collapseExample">Show More</button>

<div class="toggle-this collapse" id="collapseExample">
  Lorem ipsum dolor ...
</div>


$(document).ready(function() {
if ($(window).width() <= 768) {
  $('#collapseExample').removeClass('in')
}

}）;

请参阅jsFiddle：https://jsfiddle.net/DTcHh/

调整浏览器大小时的JQuery Button切换问题

2 个答案: