2015-04-28 72 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(); 
} 
相關問題