2015-04-28 35 views
-1

我正在使用修改的引导程序导航栏(垂直而不是水平方向),并且仅当5个页面中的一个处于活动状态时才显示子菜单。我目前使用的是toggleClass,但用户可以在不点击导航栏的情况下访问菜单,防止子导航.visible类被切换。只有当URL处于活动状态时才显示子导航

子导航应该出现如有以下页面的活跃:

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> 

回答

0

你可以做这样的事情:

$url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; 
$url_names = array('menu.php','starters.php','entrees.php','vegan.php','sides.php'); 
$find = $i = 0; 
while($find == 0 && $i<count($url_names)) { 
    if (strpos($url, $url_names[$i]) === FALSE) { 
     $i++; 
    } 
    else { 
     // print menu 
     $find = 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(); 
} 
相关问题