链接单击事件后，Bootstrap Navbar 响应式菜单不会关闭该栏答案

【问题标题】：Bootstrap Navabar responsive menu does not close the bar after a link click event链接单击事件后，Bootstrap Navbar 响应式菜单不会关闭该栏
【发布时间】：2020-08-17 05:33:19
【问题描述】：

我正在尝试使用命令“vue create sitoprova”创建的 Vue js 项目中的引导栏我导入了这些库：依赖”：{ “引导程序”：“^4.4.1”， "bootstrap-vue": "^2.13.0", "core-js": "^3.6.4", “火力基地”：“^7.14.2”， "jquery": "^3.4.1", "materialize-css": "^1.0.0-rc.2", "node-ipc": "^9.1.1",

export default {
  name: "Navbar",
  props: {
    msg: String
  },
  components:{}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @media (min-width: 992px) { 
    
    .navbar.custom-nav{
      padding-top:16px;
      padding-bottom:16px;
      background-color: #fff !important;
    }

   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar custom-nav fixed-top navbar-expand-lg navbar-light bg-light">
     <div class="container">
        <router-link class="navbar-brand" to="/">Vue Shop</router-link>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <router-link to="/" class="nav-link">Home</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/products" class="nav-link" href="#">Products</router-link>
            </li>

            <li class="nav-item">
              <router-link to="/about" class="nav-link" href="#">About</router-link>
            </li>
          
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <a class="btn btn-outline-success my-2 my-sm-0" data-toggle="modal" data-target="#login">Get Start</a>
            <a class="btn btn-outline-info border-0 mx-2 my-2 my-sm-0" data-toggle="modal" data-target="#miniCart">
              <i class="fas fa-cart-plus"></i>
            </a>
          </form>
        </div>

     </div>

</nav>

"popper.js": "^1.16.1",
"run": "^1.4.0",
"serve": "^11.3.0",
"vue": "^2.6.11",
"vue-fire": "^0.1.0",
"vue-router": "^3.1.6",
"vue-simple-alert": "^1.1.1"

我读到托管 jquery 去了，但不知道该怎么做？你能帮助我吗？非常感谢？

【问题讨论】：

标签： jquery node.js npm bootstrap-4 navbar

【解决方案1】：

最后我在这里找到了解决方案：

  name: "Navbar",
  props: {
    msg: String
  },
  methods : {
    close_navbar () {
  windows.$('.navbar-nav>router-link>').on('click', function(){
  windows.$('.navbar-collapse').collapse('hide');
});
    }


   },
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

还是谢谢

【讨论】：