仅在URL处于活动状态时显示子导航ul

时间:2015-04-28 17:25:29

标签: jquery css twitter-bootstrap

我正在使用修改后的bootstrap导航栏(垂直而不是水平),并且只有在5个页面中的一个处于活动状态时才显示子菜单。我目前正在使用toggleClass,但是用户可以访问菜单而无需单击导航栏来阻止子导航.visible类被切换。

如果以下任何页面处于活动状态,则应显示子导航:

menu.php,
starters.php,
entrees.php,
vegan.php
sides.php,

导航栏

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div>
        <img class="img-responsive brandImg" src="images/SSSLogoHome.png" alt="SSS Logo">
    </div>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li><a href="index.php">About Us</a></li>
      <li class="menuNav"><a href="menu.php">Menu</a>
          <ul class="sub-nav">
            <li>Starters</li>
            <li>Entrees</li>
            <li>Vegan and Vegetarian</li>
            <li>Sides and Desserts</li>
          </ul>
      </li>
      <li><a href="gallery.php">Gallery</a></li>
      <li><a href="promotions.php">Promotions</a></li>
      <li><a href="contact.php">Private Dining</a></li>
    </ul>

  </div><!-- /.navbar-collapse -->

</nav>

2 个答案:

答案 0 :(得分:0)

你可以这样做:

var foo = from ev in source
select new MyDataType
{
    NewRate = Parse(ev.NewValue, "New rate")
};
public static string Parse(string fromString, string pattern)
{
    return "Hello";
}

答案 1 :(得分:0)

可能有一种更清洁的方式,但这很有效:

var urlMenu = window.location.href;

if (urlMenu.search("menu.php") >= 0 || urlMenu.search("sides.php") >= 0 || urlMenu.search("entrees.php") >= 0 || urlMenu.search("starters.php") >= 0 || urlMenu.search("vegan.php") >= 0) {
    $('.sub-nav').show();
} else {
    $('.sub-nav').hide();
}