Question

网页设计中如何使用DIV+CSS实现下拉展示内容？

如左边有一个"添加数据"菜单,点击这个"添加数据",下面就出现"产品","图片","新闻",这三行文字,不想要这三个时,再点击"添加数据"文字,则这三行隐藏,请问如何实现

Answer 1

<div id=“#mainbox”>
<ul>
<li><a hre="#">添加数据</a></li>
<div class="innerbox"><a href="#">图片</a><a href="#">新闻</a><a href="#">产品</a></di>
</ul>
</div>

css设置：
#mainbox{ width:400px;height:quto; margin:0px auto;}
ul{ list-style:none;}
li{list-style:none;width:100px;}
.innerbox{display:none}
#mainbox ul li a:hover div{display:block} [_______只有css3支持.]
下面的方法用到jquery
<script>jquery1.7min.js</script>
<script>
$(function(){

$("#mainbox li").toggle({function(){
$(".innerbox").show()
},function(){
$(".innerbox").hide()

})

})
不懂得话可以问我

</script>

追问

这是我按你那CSS代码做的，做好后没有效果，只有一个添加数据四个字，点击没反应？

追答

是的，我的代码写错了。我写的是鼠标滑过的效果。我修改了下代码，可以运行，（ie7以上可以运行哦）

添加数据

图片新闻产品

重载数据

#mainbox {
width:400px;
height:quto;
margin:0px auto;
}
ul {
list-style:none;
}
li {
list-style:none;
width:100px; float:left;
}
.innerbox {
display:none
}
li:hover div.innerbox {
display:block
}

楼上兄弟既然写出来了，我就不写了。至于点击的效果，
你要是懂jquery的话，一个函数toggle（）就解决了。

Answer 2

你给的分太少了，如果多一点我就帮你写了。

追问

那我再加个十分吧

追答

好的

追问

加上去了

追答

把你的网页代码贴出来，我直接用你的修改

追问

#mainbox{width:400px;}
ul{ list-style:none;}
li{list-style:none;width:100px;}
.innerbox{display:none;}

添加数据
图片新闻产品

追答

添加数据
图片新闻产品

function xy(){
document.getElementById("daohang").style.display = document.getElementById("daohang").style.display =="none"?'block':"none"

}

代码已经贴给你了，希望给采纳答案

追问

恩，是我想要的效果，能给我解释下这句代码的意思吗：
document.getElementById("daohang").style.display = document.getElementById("daohang").style.display =="none"?'block':"none"

追答

这是一条简写JS 代码形式
首先是判断document.getElementById("daohang").style.display的值等于多少？

如果等于none
document.getElementById("daohang").style.display = "block"

否则就执行
document.getElementById("daohang").style.display = "none"