如何使用jQuery切换简单的侧边栏引导程序3 w/Meteor的菜单按钮 [英] How do you toggle menu button for simple sidebar bootstrap 3 w/Meteor using jQuery

问题描述

我正在尝试为我的非画布侧边栏创建一个菜单按钮.我正在使用cannonstar:sidebar-bootstrap3(又名启动引导程序简单边栏). http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/ http://seegatesite.com/bootstrap/simple_sidebar_menu.html#

I'm trying to create a menu button, for my off canvas sidebar. I'm using the cannonstar:sidebar-bootstrap3 (AKA start bootstrap simple sidebar). http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/ http://seegatesite.com/bootstrap/simple_sidebar_menu.html#

我的问题是，任何愿意帮助我的人都无法正常工作，请查看我的代码；感谢所有的帮助.

My problem is that it isn't working can anyone who willing to help me, look at my code please; thanks to all that help.

P.S.我正在使用流星&带铁路由器套件的Boostrap-3.

P.S. I'm using Meteor & Boostrap-3 with the iron-router package.

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand"><a href="{{pathFor'home'}}">Home</a></li>
            <li><a href="{{pathFor'home'}}">Home</a></li>
            <li><a href="{{pathFor'about'}}">About</a></li>
            <li><a href="{{pathFor'contact'}}">Contact</a></li>
        </ul>
    </div>
    <div id="page-content-wrapper">
        <div class="page-content">
                <nav class="navbar navbar-inverse navbar-default">
                    <div class="container-fluid">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle">
                            <i class="glyphicon glyphicon-menu-hamburger"></i>
                        </button>
                        <a class="navbar brand" href="#"></a>
                    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="#menu-toggle" class="btn btn-default" id="menu-toggle-2"><i class="glyphicon glyphicon-align-left"></i></a></li>
            <li><a href="{{pathFor'home'}}">Home</a></li>
            <li><a href="{{pathFor'about'}}">About</a></li>
            <li><a href="{{pathFor'contact'}}">Contact</a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="glyphicon glyphicon-search"></i></a></li> 
            <li><a href="#">{{> loginButtons}}</a></li> 
        </ul>
                    </div>

                </nav>

    <header class="masthead">
        <div class="container">
            <h1><a href="#" title=""></a></h1>
        </div>
    </header>


        </div>

    </div>
</div>

$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
    $("#menu-toggle-2").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled-2");
});

推荐答案

在流星中声明的事件有所不同:

Events are declared different in Meteor:

假设模板名称:<template name="honeybadger">..</template>

Template.honeybadger.events({
  'click #menu-toggle': function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
  }
}

进一步阅读:有关模板事件的流星文档

这篇关于如何使用jQuery切换简单的侧边栏引导程序3 w/Meteor的菜单按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！