Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
577 views
in Technique[技术] by (71.8m points)

bootstrap的nav导航for 循环生成添加的点击收起事件不管用

image.png
项目是适配pc和移动端的,点击展开导航栏,选择某一分类,导航栏应该是收起。
当我的导航栏是写死的是时候是可以收起的,但是如果用for循环生成的话就不能。这个导航分类我们是后台做的动态的可以修改,所以这个地方是动态的。

<nav class="navbar navbar-default navbar-fixed-top white no-background bootsnav on no-full">
<div class="container">
 <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
     <span class="sr-only">导航条</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
   </button> 
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav" id="nav-list">
   <li>
       <a @click="jumpToHomePage()">首页</a>
   </li>
   <li v-for="(itemNav , indexNav) in topHeadData" :key="indexNav">
    <a @click="jumpToList(itemNav.name)">{{itemNav.name}}</a>
    </li>
    <li>
     <a @click="jumpPer()" target="_black">个人中心</a>
    </li>
  </ul>
</div>
 </div>
</nav> 

// app端时,点击导航栏收起
var navBlock = document.querySelector(".navbar-toggle");

  $(".navbar-nav li a").on("click",function () {
    navBlock.click();
});


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

你这元素是循环生成的,不是默认生成的,你这样写绑定不到,要用:

<a @click="jumpToList(itemNav.name)" class="js_link">{{itemNav.name}}</a>
$(".navbar-nav").on("click",'.js_link',function () {
    navBlock.click();
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
...