html - 小屏幕折叠侧边栏和 Accordion

Question

我正在尝试重现此模板页面的效果 https://livedemo00.template-help.com/wt_58977/services.html#undefined1

但我不知道如何更改内容，就像带有导航选项卡的面板一样。我在 stackoverflow 上找到了这个例子 http://www.bootply.com/88026 .

如何在 Accordion 上仅针对小屏幕进行转换？

非常感谢。

Answer 1

您可以使用 JavaScript 轻松完成此操作。

function clickedLink(linkID){
  // ------------------------------------------------------ hide all
  document.getElementById('home').style.display = 'none';
  document.getElementById('link1').style.display = 'none';
  document.getElementById('link2').style.display = 'none';
  document.getElementById('link3').style.display = 'none';
  // ------------------------------------------------------ show active
  document.getElementById(linkID).style.display = '';
}

这是一个可行的解决方案:http://www.bootply.com/4EsSTTHzGs

//编辑: 现在我明白你想做什么 :) 你可以同时构建它们并使用 hidden-xx (xx: xs, sm, md, lg)

看看这个:http://www.bootply.com/HIFkqIQgI3

如果您不想两次编写相同的内容，您可以使用类似于 <?php include 'folderx/contentx.html'; ?> 的内容将内容包含在 php 中

If this is working for you, mark this Answer as the right Answer.. :)