用JS+CSS实现折叠式导航菜单，当点击第一菜单后，自动打开第二次菜单，如下图：

html-css021

用JS+CSS实现折叠式导航菜单，当点击第一菜单后，自动打开第二次菜单，如下图：,第1张

<style>

/*样式自己补一下*/

    .parent .son{display: none}

</style>

<ul class="parent">

<li class="pli">

<span>php</span>

<ul class="son">

<li>php1</li>

<li>php1</li>

</ul>

</li>

<li class="pli">

<span>php</span>

<ul class="son">

<li>php1</li>

<li>php1</li>

</ul>

</li>

<li class="pli">

<span>php</span>

<ul class="son">

<li>php1</li>

<li>php1</li>

</ul>

</li>

<li class="pli">

<span>php</span>

<ul class="son">

<li>php1</li>

<li>php1</li>

</ul>

</li>

<li class="pli">

<span>php</span>

<ul class="son">

<li>php1</li>

<li>php1</li>

</ul>

</li>

</ul> var pli = document.querySelectorAll(".parent .pli span")

for(var i = 0i<pli.lengthi++){

pli[i].index = i

pli[i].onclick = function(){

for(var j = 0j<pli.lengthj++){

document.querySelectorAll(".parent .pli .son")[j].style.display="none"

}

this.parentNode.querySelector(".son").style.display="block"

}

}

放上去的话，用css的hover，先设置默认隐藏

.name{}display:none} .name:hover > .list{display:block}

点击的话，用JQ的click

$(".name").click(function(){

    if($(".name").is(":hidden"))

        $(".name").css("display","block")

    else

        $(".name").css("display","none")

})

如果需要带点动画效果，你就要看看CSS3了........