Question

我试图为我的网站制作一个非常简单，快速加载，易于阅读和响应的设计。我使用Bootstrap的列表组类进行左侧导航，而且我一直无法找到使移动/小型设备可折叠的方法。此外，当我减少屏幕太多时，我的顶级导航消失了。我应该废弃设计并重新开始吗？除了缺乏移动兼容性之外，我一般都很满意。

http://www.taniarascia.com/acordeondeteclas

这是我第一次尝试使用这样的东西寻求帮助，我们将不胜感激。

<div class="list-group">
<a href="intro.html" class="list-group-item">The Basics</a>

是我进行左手导航的方式。

Answer 1

您的菜单：

<div id="sidebar" class="list-group">
    <a class="list-group-item collapse-toggle head1">Learn Piano Accordion</a>
    <div id="menu" class="hidden-tablet collapse">
        <a class="list-group-item" href="intro.html">The Basics</a>
        <a class="list-group-item" href="types.html">Types of Accordions</a>
        <a class="list-group-item" href="musictheory.html">Music Theory</a>
        <a class="list-group-item" href="scales.html">Scales, Thirds and Sixths</a>
        <a class="list-group-item" href="chords.html">Major, Minor and 7th Chords</a>
        <a class="list-group-item" href="keys.html">Keys and Chord Progressions</a>
        <a class="list-group-item" href="tutorials.html">Tutorials</a>
        <a class="list-group-item" href="adornos.html">Adornos</a>
        <a class="list-group-item" href="basses.html">Basses</a>
        <a class="list-group-item" href="bands.html">Bands with Piano Accordion</a>
        <a class="list-group-item" href="misc.html">Miscellaneous</a>
    </div>
</div>

JS

$('.collapse-toggle').on('click', function(){
    $('#menu').collapse('toggle');
});

Fiddle

<强>更新要在使用移动设备时隐藏菜单，您可以添加jQuery函数来检查屏幕的实际大小，并在低于X时执行操作（在本例中为480）。

JS：

$(window).on('resize', function(){
    var windowSize = $(window).width();
    if(windowSize < 480) {
        $('#menu').collapse('hide');
    } else {
        $('#menu').collapse('show');
    }
});

Fiddle Updated

使用Bootstrap类列表组的移动响应式可折叠菜单

1 个答案: