Question

我正在开发一个项目，我们正在使用twitter bootstrap。我设置了一个侧边栏，其中包含一个隐藏在桌面上的折叠按钮，可以在任何其他较小的分辨率上看到。我想设置它以便崩溃在桌面上打开并在任何其他时间关闭。代码如下所示：

<p class="lead visible-desktop"><i class="icon-search"></i> Quick Search</p>
     <button type="button" class="btn hidden-desktop" data-toggle="collapse" data-target="#quicksearch"><i class="icon-search"></i> Quick Search</button>
     <div id="quicksearch" class="in">
          some content here...
     </div>

有人能让我朝着正确的方向前进吗？

Answer 1

以防万一其他人寻找这个，这就是我做的......

jquery解决方案：

此代码

<div id="quicksearch" class="in">
      some content here...
 </div>

更改为默认显示为div扩展

<div id="quicksearch">
      some content here...
 </div>

并且添加了这个脚本，以便在加载窗口大小或调整大小到765px以下（bootstraps电话宽度）时，“崩溃”类切换当然会折叠div

var toggleBlock = function() {
    var windowsize = $(window).width(),
        isDesktop = windowsize > 765;
    $("#quicksearch").toggleClass("collapse out", !isDesktop);
}

$(document).ready(toggleBlock);
$(window).on("resize.showContent", toggleBlock);
toggleBlock();

twitter bootstrap collapse - 仅在桌面上可见

1 个答案: