默认情况下，打开所有可折叠的内容，并禁用折叠超过设置的屏幕大小

default open all accordion content and disable collapse over set screen size

本文关键字：折叠 设置 屏幕 情况下 默认 可折叠      更新时间：2023-09-26

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

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

我使用的JS和CSS切换了两个classes.accordion部分（默认）和.expand，当点击带有class.按钮的文本链接时，它就会激活。

$(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链接不会将部分恢复为.arconable内容。

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

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

这不是很容易吗？

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

这样一来，expand类只在小屏幕上有效。即使它在大屏幕上被添加/删除，它也不会有任何作用。

我无法将上面的答案标记为正确答案，因为它不起作用@克里斯蒂安314159非常感谢你让我走上正轨，我真的想得太多了。

我只需要这个小部分：

@media only screen and (min-width: 640px){
    div.accordion-section {
      height: auto;
    }
}
相关文章：