怎么用vue.js实现一个二级导航栏

JavaScript016

怎么用vue.js实现一个二级导航栏,第1张

一、打开Dreamweaver，点击 文件-新建 菜单，创建一个HTML文件，输入网站导航栏文字，并选中输入的文字，在下面的属性栏链接处加一个空链接。然后保存该网页文件。 二、点击 窗口-行为 菜单，打开行为面板。

依靠css 将页面

document.documentElement.style.overflow='hidden'

document.body.style.overflow='hidden'//手机版设置这个。

如果设置了如上，页面的滚动条将会消失，此时鼠标滚轮失效。

HTML代码：

<div class="wrap">

<div class="position fl">

<a href="">合肥</a>

</div>

<div class="serch fr">

<input type="input" placeholder="请输入关键字" class="ser fl"/><input type="submit" class="submit fl" value="搜索" />

</div>

</div>

<div class="tanchu">

<div style="background:#eaeaeaoverflow:autoheight:300px">

<ul class="left">

<li class="bg">安徽<span class="fr">></span></li>

<li>北京<span class="fr">></span></li>

<li>浙江<span class="fr">></span></li>

<li>湖南<span class="fr">></span></li>

<li>湖北<span class="fr">></span></li>

<li>江苏<span class="fr">></span></li>

<li>山西<span class="fr">></span></li>

<li>广东<span class="fr">></span></li>

<li>天津<span class="fr">></span></li>

<li>云南<span class="fr">></span></li>

<li>山东<span class="fr">></span></li>

<li>福建<span class="fr">></span></li>

<li>吉林<span class="fr">></span></li>

</ul>

<ul class="right">

<li class="erji">

<ul>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>杭州</li>

<li>台州</li>

<li>天台</li>

<li>绍兴</li>

<li>舟山</li>

<li>宁波</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>杭州</li>

<li>台州</li>

<li>天台</li>

<li>绍兴</li>

<li>舟山</li>

<li>宁波</li>

</ul>

</li>

<li class="erji">

<ul>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>杭州</li>

<li>台州</li>

<li>天台</li>

<li>绍兴</li>

<li>舟山</li>

<li>宁波</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>合肥</li>

<li>黄山</li>

<li>芜湖</li>

<li>巢湖</li>

<li>六安</li>

<li>淮南</li>

</ul>

</li>

<li class="erji" style="display:none">

<ul>

<li>宣武</li>

<li>西城</li>

<li>海淀</li>

<li>朝阳</li>

<li>丰台</li>

<li>昌平</li>

</ul>

</li>

</ul>

</div>

</div>

JS代码：

<script>

$(function(){

$(".position") .toggle(

function(){

$(".tanchu").show()

},

function(){

$(".tanchu").hide()

})

})

</script>