bootstrap下拉菜单

官网实例:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

  //相关属性和api:  data-*;  aria-*,role(二者和盲人阅读器相关,普通开发可以忽略)   ;
                   open(使隐藏内容直接显示)   dropdown-menu-right(让下拉菜单靠右,当父元素足够长的时候,"btn-block"使其变长)  dropdown-header  divider
                   dropup(使隐藏的内容向上显示)  text-center(内容居中)

 <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li class="dropdown-header">第一部分</li>               //第一部分的li和其他li并列
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>       //分割线
    <li class="dropdown-header">第二部分</li>              //第二部分li和其他li并列
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
  </ul>
</div>

思考: 如何让隐藏部分hover显示? -------------------------------jquery控制

<style>
     .my-btnStyle button{
            width: 100px;
            height: 50px;
            border: none;
            background-color: #f6f8f8;
        }
        .my-btnStyle .dropdown-menu img{
            margin: 5px;
         }
         .my-btnStyle .dropdown-menu{
            animation: 0.3s linear fadeIn;
         }
         @keyframes fadeIn{
            0%{opacity: 0;transform: translateY(-20px);}
            100%{opacity: 1;transform: translateY(0)}
         }
</style>
<body>
        <div class="dropdown my-btnStyle">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li class="dropdown-header"><img width="16" height="16" class="m-r-sm" alt="HTML Website Templates" src="https://www.codester.com/static/uploads/categories/8/icon-alt.png">第一部分</li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
    <li class="dropdown-header"><img width="16" height="16" class="m-r-sm" alt="HTML Website Templates" src="https://www.codester.com/static/uploads/categories/8/icon-alt.png">第二部分</li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
  </ul>
</div> 
</body>

<script>
         $(function(){
        var timer=null;
        if(window.navigator.userAgent.toLowerCase().indexOf('mobile')==-1){
            $(".dropdown-toggle").hover(function(){
                clearTimeout(timer);
               $(".dropdown").addClass('open');
        },function(){
            timer=setTimeout(function(){
              $(".dropdown").removeClass('open');
            },100)
        })
            $(".dropdown-menu").hover(function(){
                clearTimeout(timer);
        },function(){
            timer=setTimeout(function(){
              $(".dropdown").removeClass('open');
            },100)
        })
        }
    })
</script>

bootstrap框架下,通过jquery利用鼠标hover控制内容显示和隐藏,同时点击显示和隐藏也生效!

关于其他的API:


$('.dropdown-toggle').dropdown();(除去data-toggle="dropdown)

$('.dropdown-toggle').dropdown('toggle');

$('.dropdown').on('show.bs.dropdown',function(){alert('a')});
$('.dropdown').on('shown.bs.dropdown',function(){alert('a')});
$('.dropdown').on('hide.bs.dropdown',function(){alert('a')});
$('.dropdown').on('hiden.bs.dropdown',function(){alert('a')});

不积小流,无以成江河!记住一万个小时定律!