如何在Navbar上註冊Bootstrapper更改事件

我正在創建一個小型主頁。根據Navbar風格（帶或不帶漢堡包菜單），我想顯示span和id=actualPage。我該如何實現（JQuery，JavaScript甚至是CSS）？ - 我讀了很多關於崩潰等的內容，但我不確定這是否是正確的方法，我還沒有找到任何簡單的解決方案。如何在Navbar上註冊Bootstrapper更改事件

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 
        aria-expanded="false" aria-controls="navbar"> 
       <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 active" href="index.php?p=home">MyPage 
       <span id="actualPage">- <?= $pages[$activePage] ?></span></a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       ... 
      </ul> 
     </div> 
    </div> 
</nav>

感謝您的幫助！

來源

2017-02-25 Kevin Wallis

我解決了給定的問題，通過使用hidden類。 - 它實際上並不解決問題，而是解決問題的原因。

在引導3：

<a class="navbar-brand active">Test<span id="actualPage" class="hidden-xl hidden-lg hidden-md hidden-sm">- <?= $pages[$activePage] ?></span></a>

在引導4：

<a class="navbar-brand active">Test<span id="actualPage" class="hidden-sm-up">- <?= $pages[$activePage] ?></span></a>

查看以下鏈接：Hidden-md-down is not working

來源

2017-02-25 14:07:51

那麼，如果內存服務，Bootstraps導航摺疊到漢堡在1200px。

如果你想要的是未摺疊的只是使用CSS的東西，如當跨度纔可以看到：

.mySpan{ display: inline-block;} 
@media (min-width: 1200px) { .mySpan{display: none;}}

如果你需要的是ID爲某種計算的，想不存在，那麼你倒是必須使用JS基於在屏幕上被添加/移除的ID < 1200像素

編輯：對於JS溶液它將是這樣的：

window.onresize = function() { 
    if (window.innerwidth<1200px){ 
     document.getElementById("small").id = "big"; 
    } 
    else{ 
     document.getElementByID("big").id = "small"; 
    } 
};

來源

2017-02-25 11:39:49 Frenchmassacre

我怎麼可能回調添加到導航欄的變化？ –

它不必與導航欄更改有關。導航欄更改爲1200像素寬。你只是在複製它的行爲。你在問JS的選擇嗎？根據屏幕寬度添加/刪除ID？ – Frenchmassacre

我怎樣才能附加某種回調到JavaScript中的導航欄更改？ –

如何在Navbar上註冊Bootstrapper更改事件

回答

相關問題