Question

我想创建一个OnePage站点，我在bootstrap崩溃时创建了侧栏。现在我想隐藏这个侧边栏并转到部分，点击链接但它不起作用。这是我的代码：

HTML

    <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
        <ul class="nav sidebar-nav">
            <li>
                <a href="#" class="closed" data-toggle="offcanvas">zamknij</a>
            </li>
            <li class="sidebar-brand">
                <a href="#">
                    Brand
                </a>
            </li>
            <li data-menuanchor="firstPage">
                <a href="#firstPage">Home</a>
            </li>
            <li data-menuanchor="secondPage">
                <a href="#secondPage">About</a>
            </li>
            <li data-menuanchor="3rdPage">
                <a href="#3rdPage">Events</a>
            </li>
        </ul>
    </nav>

            <button type="button" class="sidebar is-closed" data-toggle="offcanvas">
                X
            </button>

和 JS

$(document).ready(function () {
    var trigger = $('.sidebar');
    var CloseIcon = $('.closed');
    var NavElement = $('.nav li a');

    trigger.click(function () { 
        trigger.collapse( 'hide' );
    });

    CloseIcon.click(function () {    
        trigger.show( 'slow' );
    });

    NavElement.click(function() {
        trigger.collapse( 'hide' );
    });


    $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');
    }); 

    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
        navigation: true,
        menu: '.sidebar-nav',
        autoScrolling: false,
        navigationPosition: 'right',
        navigationTooltips: ['First page', 'Second page', 'Third and last page'],
    });

});

我使用的是FullPage.js

编辑以下是JSFiddle http://jsfiddle.net/dxg7Lep2/

Answer 1

不确定你的测试有什么问题，如果你创建了一个jsfiddle，我可以看看它。我创建了一个尝试复制行为，但对我来说工作正常。

http://jsfiddle.net/Dhanck/ytryL4zy/2/

$('#fullpage').fullpage({
     sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
     anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
     menu: '.sidebar-nav',
     css3: true,
     scrollingSpeed: 1000
   });

Bootstrap collapse OnePage - 点击'a'后隐藏

1 个答案: