2015-10-21
ul{
box-shadow:0px 0px 2px #ddd;
}
这个样式不是select和option标签做得出来的。你说的边框部分内容的确只需要一个:
border:solid 1px #9c9c9c;
难的在于,select标签并不支持如此。我们观察下这个下拉菜单的特点:
所选中的选项在下拉选项中是没有出现的;
右边的向下箭头部分并没有select标签所生成的箭头的背景部分;
拥有包含整个下拉菜单的灰色边框;
因此,我们可以确定,这个下拉菜单是div+css+js所制作出来的。
至于具体代码,我只能写出个大概,你可以看下,样式没法跟途中的菜单一模一样,但功能是一样的。
首先是html部分,观察中可以发现,是一个div内包含了四个子div,其中有一个是隐藏的,分别是
描述选中选项的div(即途中含有右边“▼”符号的div)
“所有我可见范围”选项的div(此div因为被选中,所以隐藏)
“我不可见范围”
“部分不可见范围”
所以我们可以写出下列html代码和css:
<div id="baseBlock">
<div id="choosedDiv" onclick="optionChooseList()" onclick="optionChooseList()">
<div id="choosedDivText" class="optionBlock">所有我可见范围</div>
<div id="arrorBlock" class="optionBlock">▼</div>
</div>
<div id="optionDiv1" class="optionBlock" onclick="optionChosed1()" style="width: 150px;display: none;margin-left: 10px;">所有我可见范围</div>
<div id="optionDiv2" class="optionBlock" onclick="optionChosed2()" style="width: 150px;display: none;margin-left: 10px;">我不可见范围</div>
<div id="optionDiv3" class="optionBlock" onclick="optionChosed3()" style="width: 150px;display: none;margin-left: 10px;">部分不可见范围</div>
</div>
<style type="text/css">
#baseBlock {
border: 1px solid #9c9c9c;
width: 160px;
background-color:white;
}
#choosedDiv {
margin-left: 10px;
width: 150px;
}
.optionBlock {
line-height: 25px;
font-size: 15px;
color: black;
overflow: hidden;
text-align:left;
}
#arrorBlock {
width: 25px;
line-height: 25px;
font-size: 15px;
color: black;
text-align: center;
margin-left:125px;
margin-top:-25px;
}
</style>
如此,先将下拉菜单的部分用display:none全部隐藏起来,方便js控制的时候改变显示状态;
然后我们需要一个值来表示我们选中了第几个选项,在js里我将这个值命名为“baseBlockNum”,并将其默认赋值为1。
接下来就是上述html中onclick调用的函数的编写。全部js代码如下:
<script type="text/javascript">
var baseBlockNum = 1;
function optionChooseList() {
document.getElementById("optionDiv1").style.display = "block";
document.getElementById("optionDiv2").style.display = "block";
document.getElementById("optionDiv3").style.display = "block";
document.getElementById("optionDiv" + baseBlockNum).style.display = "none";
}
function optionChosed1() {
baseBlockNum = 1;
document.getElementById("choosedDivText").innerHTML = "所有我可见的范围";
document.getElementById("optionDiv1").style.display = "none";
document.getElementById("optionDiv2").style.display = "none";
document.getElementById("optionDiv3").style.display = "none";
}
function optionChosed2() {
baseBlockNum = 2;
document.getElementById("choosedDivText").innerHTML = "我不可见的范围";
document.getElementById("optionDiv1").style.display = "none";
document.getElementById("optionDiv2").style.display = "none";
document.getElementById("optionDiv3").style.display = "none";
}
function optionChosed3() {
baseBlockNum = 3;
document.getElementById("choosedDivText").innerHTML = "部分不可见范围";
document.getElementById("optionDiv1").style.display = "none";
document.getElementById("optionDiv2").style.display = "none";
document.getElementById("optionDiv3").style.display = "none";
}
</script>
原理是:点击带“▼”的div部分时,调用optionChooseList函数,将其余的三个div全部显示,又因为以下这段代码读取baseBlockNum的值,将相对应的div进行隐藏:
document.getElementById("optionDiv" + baseBlockNum).style.display = "none";
当下拉菜单出现的时候,我们对三个下拉的div分别设置对应的函数来控制点击带“▼”的div部分的文字内容。这三个optionChosed函数重复的部分在于:当点击之后,对三个下拉的div进行隐藏。
以下是完整的代码,将其复制到记事本中保存为html格式文件打开试试:
=========================================================
<style type="text/css">
#baseBlock {
border: 1px solid #9c9c9c;
width: 160px;
background-color:white;
}
#choosedDiv {
margin-left: 10px;
width: 150px;
}
.optionBlock {
line-height: 25px;
font-size: 15px;
color: black;
overflow: hidden;
text-align:left;
}
#arrorBlock {
width: 25px;
line-height: 25px;
font-size: 15px;
color: black;
text-align: center;
margin-left:125px;
margin-top:-25px;
}
</style>
<script type="text/javascript">
var baseBlockNum = 1;
function optionChooseList() {
document.getElementById("optionDiv1").style.display = "block";
document.getElementById("optionDiv2").style.display = "block";
document.getElementById("optionDiv3").style.display = "block";
document.getElementById("optionDiv" + baseBlockNum).style.display = "none";
}
function optionChosed1() {
baseBlockNum = 1;
document.getElementById("choosedDivText").innerHTML = "所有我可见的范围";
document.getElementById("optionDiv1").style.display = "none";
document.getElementById("optionDiv2").style.display = "none";
document.getElementById("optionDiv3").style.display = "none";
}
function optionChosed2() {
baseBlockNum = 2;
document.getElementById("choosedDivText").innerHTML = "我不可见的范围";
document.getElementById("optionDiv1").style.display = "none";
document.getElementById("optionDiv2").style.display = "none";
document.getElementById("optionDiv3").style.display = "none";
}
function optionChosed3() {
baseBlockNum = 3;
document.getElementById("choosedDivText").innerHTML = "部分不可见范围";
document.getElementById("optionDiv1").style.display = "none";
document.getElementById("optionDiv2").style.display = "none";
document.getElementById("optionDiv3").style.display = "none";
}
</script>
<div id="baseBlock">
<div id="choosedDiv" onclick="optionChooseList()" onclick="optionChooseList()">
<div id="choosedDivText" class="optionBlock">所有我可见范围</div>
<div id="arrorBlock" class="optionBlock">▼</div>
</div>
<div id="optionDiv1" class="optionBlock" onclick="optionChosed1()" style="width: 150px;display: none;margin-left: 10px;">所有我可见范围</div>
<div id="optionDiv2" class="optionBlock" onclick="optionChosed2()" style="width: 150px;display: none;margin-left: 10px;">我不可见范围</div>
<div id="optionDiv3" class="optionBlock" onclick="optionChosed3()" style="width: 150px;display: none;margin-left: 10px;">部分不可见范围</div>
</div>
好长啊。。辛苦了~!
不过我们老师告诉我这个作业不用JS都可以的。。要怎么做呢。。?
那就不懂了。这个功能如果仅靠css实现就必须用到伪类。目测hover和active最接近。
但是css是控制不了标签中的内容的。
如果你们老师解答了,求告知。我也想学学。写了先。
是ul的?
2015-10-21