如何用css或js设置如下图的样式，当点击的时候出现下拉菜单，显示里面的内容。

html-css026

如何用css或js设置如下图的样式，当点击的时候出现下拉菜单，显示里面的内容。,第1张

HTML：

<p class="p">基础</p>

<div class="show">

<ul>

<li><a href="#">aa</a></li>

<li><a href="#">ss</a></li>

<li><a href="#">dd</a></li>

<li><a href="#">ff</a></li>

<li><a href="#">gg</a></li>

</ul>

</div>

css:

.show{

display:none

}

js:

var isClick=true

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

if(isClick){

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

isClick=false

}else{

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

isClick=true

}

})

思路，

要显示的内容用一个div包住，当你点击基础的时候，div显示，再点击时div隐藏

其实你只要知道其中的原理就好办了，它就是当你鼠标放上去的时候，就显示一个div，也就是下拉菜单，可以用调用jquery来实现，如下：

function hover_show(hoverClass,showClass)

{

$(hoverClass).hover(function (){

$(showClass).eq($(this).index()).show()

},function (){

$(showClass).eq($(this).index()).hide()

})

}

$(document).ready(function(e) {

hover_show(".menu li",".sub_menu_panal")})