Question

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

Answer 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 = 0;i<pli.length;i++){
	pli[i].index = i;
	pli[i].onclick = function(){
		for(var j = 0;j<pli.length;j++){
			document.querySelectorAll(".parent .pli .son")[j].style.display="none";
		}
		this.parentNode.querySelector(".son").style.display="block";
	}
}

Answer 2

jquery easyui有一个插件accordion可以实现此功能！
http://www.jeayui.com