web中关于有下拉作用的标签元素以及属性

一、最常用的<select>标签

　　（1）、select 元素可创建单选或多选菜单。<select> 元素中的<option>标签用于定义列表中的可用选项

　　代码如下：

<select>
            <option>pear</option>
            <option>apple</option>
            <option>banana</option>
            <option>orange</option>
</select>

　　显示如图所示：

　　　　该种方法单选，且只显示一个选项框；那么如果想要显示所有的选项呢？

　　就用到了，多选multiple="multiple"属性，以及，设置选择框size；

　　代码如下：

<select multiple="multiple" size="4">/
            <option>pear</option>
            <option>apple</option>
            <option>banana</option>
            <option>orange</option>
</select>

　　显示如下：

　　　　

　　小练习：页面有两个size=10的select控件，两个控件之间有两个按钮，选中其中一个option选项，然后按下任意按钮，实现将option选项移入另一边的select控件中；

二、HTML5中的datalist标签：

　　<datalist> 元素规定输入域的选项列表；（当用户在自动完成域中输入时，浏览器应该在该域中显示填写的选项；）

　　代码如下：

<input list="dl" type="text" placeholder="Search"/>
        <datalist id="dl">
            <option value="IE"></option>
            <option value="Firefox"></option>
            <option value="chrome"></option>
            <option value="safari"></option>
        </datalist>

　　显示如下：

　　用户在输入框输入，浏览器自动显示在option中填入的提示信息；

　　（注意：

　　　　1、input中的list属性与datalist中的ID名是相同的；

　　　　2、相比较select，datalist不仅可以供用户选择，还可以自己手动添加；而且还可以达到模糊匹配的效果；）

　　　　举例，比如淘宝的搜索框：

　　　　

三、bootstrap中的下拉效果：

　　（1）、按钮内设置下拉菜单：（对点击有下拉效果的控件设置.dropdown-toggle;以及data-toggle="dropdown"。对于下拉之后显示的控件div设置.dropdown-menu或者.dropdown-menu-right设置左右对齐方式；对于div内部的链接a设置.dropdown-item）

<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">app</button>
<div class="dropdown-menu dropdown-menu-right">
   <a href="#" class="dropdown-item">ios</a>
   <a href="#" class="dropdown-item">and</a>
</div>

<!--拆分按钮组下拉菜单-->
<div class="btn-group">
    <button class="btn btn-primary">app</button>
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>//bootstrap中向下的小箭头符号
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <a href="#" class="dropdown-item">ios</a>
        <a href="#" class="dropdown-item">and</a>
    </div>
</div>

　　显示如下：

　　　　　　　　　　　　　　　　　　　　　　　　　　

（2）点击控件实现内容的显示与隐藏（实现效果和下拉菜单有相似之处）　　

<button class="btn btn-success" data-toggle="collapse" data-target="#demo">click and show</button>
//可以不用button;如果用<a>的话，data-target="#"可以改为href="#"
<div id="demo" class="collapse">
    tody is 11.21 and now is 16:27;
</div>

　　显示如图所示：

　　　　

（3）弹出框与信息框

<a href="#" data-toggle="tooltip" title="猜猜我是谁?" data-placement="bottom">Z_Joker</a>
        <input type="button" data-toggle="popover" title="my message" data-content="girl and 21 and study;" data-placement="bottom" value="锦色" class="btn btn-primary">
        <script type="text/javascript">
            $(document).ready(function(){
                $('[data-toggle="tooltip"]').tooltip();
                $('[data-toggle="popover"]').popover();
            });
        </script>

四、HTML5中的:hover　　

//css代码
*{margin: 0;padding:0;}
.down{display: inline-block;position: absolute;margin-left:50%;}
a{display: block;}
.box{width: 100px;border:1px solid #ccc;padding:4px;border-radius:5px;display: none;position:absolute;}
.down:hover .btn{background-color: #ccc;}
.down:hover .box{display:block;}
//body内部代码
<div class="down">
    <a class="btn">个人中心</a>
    <div class="box">
        <a href="">我的信息</a>
        <a href="">我的购物车</a>
        <a href="">我的余额</a>
    </div>
</div>

　　显示如下：

　　　　

五、当然还有其他的一些利用到div，CSS以及js做的比较好看的效果了，这里就是总结一下能显示出下拉效果的几种可能。。。。。