Question

对于我的网站设计，我需要一个手风琴菜单，用于小于7英寸水平平板电脑的屏幕和一般的水平菜单，内容充当单页网站（因此所有手风琴部分都设置为打开）。

我没有使用JQuery手风琴或任何其他预制版本，因为我自己设计中的一些视觉方面并不支持。

我正在使用的JS和CSS切换2个类.accordion-section（默认值）和.expand，当单击类.button的文本链接时激活。

$(document).ready(function() {

var accordionPanels = $('.accordion-section');

$( ".button" ).on("click", function() {

    $(this).next(".accordion-section").toggleClass("expand");

    });
});

.expand类看起来像这样。我正在扩展div的高度，而不是实际显示隐藏的部分，因为我有一个背景图像，当部分关闭时需要可见，但是在打开时保持可见并排列。

div.accordion-section.expand {
height: auto
}

我基本上希望在屏幕超过特定大小时将此类应用于所有部分，并确保单击.button链接不会将部分还原为.accordion-content。

我希望这比我为自己做的更简单。我可以用媒体查询做到这一点，但我认为JS仍会干涉，它看起来很笨重而且没必要。

注意：我还没有水平菜单，但这没有问题，我只需要暂时显示页面。

Answer 1

这不会像这样容易吗？

.accordion-section {
  height: auto;
}

@media only screen and (max-width: 640px){
  .accordion-section {
    height: 0;
  }
  .accordion-section.expand {
    height: auto;
  }
}

这样，您的expand课程仅在小屏幕上有效。即使在大屏幕上添加/删除它，它也不会做任何事情。

Answer 2

我无法将上面的答案标记为正确的答案，因为它不起作用; @ christian314159非常感谢你让我走上了正确的轨道，我正在严肃地思考整个问题。

我只需要这个小部分：

@media only screen and (min-width: 640px){

    div.accordion-section {
      height: auto;
    }
}

默认打开所有手风琴内容并禁用设置屏幕大小的折叠

2 个答案: