BootStrap实现鼠标悬停下拉列表功能mgm娱乐场:

BootStrap实现鼠标悬停下拉列表功能,具体内容详情如下所示:

官方教程

 //最简单的鼠标悬停,实现下拉功能,应用bootstrap框架的知识,不会bootstrap自己百度怎么使用

http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html

mgm娱乐场 1

使用方法:

 <html><head>
    <meta charset="UTF-8">
      <!-- 引入 Bootstrap -->
   <link href="../css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../libs/jquery-1.11.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <title></title>
  </head>
  <body>
<div class="dropdown" >
      触发器
       <ul class="dropdown-menu" >
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
    <script>
      $(document).ready(function(){
        $("span").hover(function(){//鼠标悬停触发事件
        $(".dropdown-toggle").dropdown('toggle');
        });
      });
    </script>
  </body>
</html>

第一步引用样式以及相关JS

以上所述是小编给大家介绍的BootStrap实现鼠标悬停下拉列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" rel="external nofollow" type="text/css"/>

您可能感兴趣的文章:

 第二步 构造Selection(注意
需要设置multiple属性,否则依然是单选模式,multiple=”multiple” )

<!-- Build your select: -->
<select class="multiselect" multiple="multiple">
 <option value="cheese">Cheese</option>
 <option value="tomatoes">Tomatoes</option>
 <option value="mozarella">Mozzarella</option>
 <option value="mushrooms">Mushrooms</option>
 <option value="pepperoni">Pepperoni</option>
 <option value="onions">Onions</option>
</select>

 第三步 初始化插件:

相关文章