Bootstrap 引导程序导航栏在路线更改时保持展开

lmyy7pcs  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(191)

我有一个流星项目使用铁路由器。
在我的项目中,我有一个引导导航栏,不幸的是,每当我导航到一条路线,而导航栏是扩展的(由于屏幕是最小宽度),导航栏保持扩展,当我去一个新的路线。
有没有办法设置导航栏在改变路线时再次折叠,就像通常的页面刷新一样?
导航栏模板:

<template name="navigation">
<nav class="navbar navbar-default">
<div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="{{pathFor route='home'}}"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;&nbsp;&nbsp;RNG Leaderboard</a>
  </div>

  <div class="navbar-collapse collapse" id="navbar-collapse" aria-expanded="false" style="height: 1px;">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;&nbsp;&nbsp;Games <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li>
            <a href="/headsortails">Heads or Tails</a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-stats"></span>&nbsp;&nbsp;&nbsp;&nbsp;Leaderboards <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li>
            <a href="/headsortailsleaderboard">Heads or Tails</a>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      {{#if currentUser}}
        {{#if isInRole 'admin'}}
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;&nbsp;&nbsp;Maintenance <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li>
                <a href="/manageusers"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;&nbsp;Manage Users</a>
              </li>
            </ul>
          </li>
        {{/if}}
        <li><a href="/@{{currentUser.username}}"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;&nbsp;{{currentUser.profile.firstName}}&nbsp;{{currentUser.profile.lastName}}</a></li>
        <li><a id="logout" href="{{pathFor route='login'}}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;&nbsp;&nbsp;Log out</a></li>
      {{else}}
        <li><a href="{{pathFor route='login'}}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;&nbsp;&nbsp;&nbsp;Log in</a></li>
        <li><a href="{{pathFor route='signup'}}"><span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;&nbsp;&nbsp;Sign up</a></li>
      {{/if}}
    </ul>
  </div>
</div>
</nav>
</template>

工艺路线代码:

Router.configure({
  layoutTemplate: 'layout', // Defines the layout template
  loadingTemplate: 'loading', // Defines the loading template
  onAfterAction: function(){
    $('.nav-collapse').collapse('hide');
  }
});

Router.plugin('dataNotFound', {
  notFoundTemplate: 'dataNotFound'
});

Router.route('/', {
  name: 'home',
  template: 'home'
});

Router.route('/signup');
Router.route('/login');
Router.route('/recoverpassword');
Router.route('/resetpassword');

Router.route('/manageusers', {
  name: 'manageusers',
  controller: 'ManageUsersController',
});

ManageUsersController = RouteController.extend({
  template: 'manageusers',
  before: function() {
    if (!Roles.userIsInRole(Meteor.userId(), 'admin')) {
      this.redirect('home');
    } else {
      this.render('manageusers');
    }
  }
});

var usernameRoute = '/@:username';
Router.route(usernameRoute, {
  name: 'profile',
  controller: 'ProfileController'
});

ProfileController = RouteController.extend({
  template: 'profile',
  waitOn: function() {
    return Meteor.subscribe('userProfile', this.params.username);
  },
  data: function() {
    var username = Router.current().params.username;
    return Meteor.users.findOne({
      username: username
    });
  }
});

Router.route('/headsortails');
Router.route('/headsortailsleaderboard');
0dxa2lsx

0dxa2lsx1#

一个不优雅但实用的解决方案是检查导航栏是否展开,然后点击它-根据巴里道尔的解决方案

closeNavBar: function() {
    var isExpanded = $('.navbar-toggle').attr('aria-expanded') === true;
    if(isExpanded) {
      $('.navbar-toggle').click();
    }
    this.next();
  },
ltqd579y

ltqd579y2#

根据Michel的回答和一些挖掘,我在router.js文件中提出了以下解决方案:

Router.configure({
  onAfterAction: function(){
    $('.navbar-toggle').click();
  }
});
a2mppw5e

a2mppw5e3#

邻居提供的解决方案都有效。
它必须是这样的。attr()返回字符串'true''false',而不是布尔值,这就是为什么使用=== 'true'

Router.configure({
    ...
    onAfterAction() {
        const navbarToggle = $('.navbar-toggle');
        if (navbarToggle.attr('aria-expanded') === 'true') {
            navbarToggle.click();
        }
    }
});

相关问题