單擊按鈕時關閉導航窗口（移動）

Question

我有一個幾乎完美的導航菜單。

在移動設備上：當我打開漢堡菜單時，它會占據屏幕大小的 3/4。 我沒問題。 當我單擊導航欄中的鏈接之一時，我被帶到了正確的部分，但菜單保持打開狀態。

我更喜歡點擊其中一個鏈接后立即關閉菜單，而不是我必須按漢堡包來關閉菜單。

HTML：

    <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="#about">About</a>
        </li>
        <li>
          <a href="#portfolio">Portfolio</a>
        </li>
        <li>
          <a href="#education">Education</a>
        </li>
        <li>
          <a href="#experience">Experience</a>
        </li>
        <li>
          <a href="#testimonials">Testimonials</a>
        </li>
        <li>
          <a href="#testimonials">Skills</a>
        </li>

        <li>
          <a href="#contact">Contact</a>
        </li>
      </ul>
    </div>

Answer 1

您可以在所有<a>上添加單擊偵聽器，然后在偵聽器函數中關閉該欄，最好的方法是為所有這些都提供相同的類並使用 for 循環向它們添加偵聽器
或者你可以使用 jquery 這樣你就不需要循環了

Answer 2

$('.nav a').on('click', function(){

$('.navbar-toggle').click(); 

}); 

使用此代碼，當您單擊導航欄項目時，它將調用navbar-toggle類的單擊事件。 這將根據需要關閉導航欄。