m.lom599.com_手机版乐白家网址_乐百家手机首页登录

bootstrap网页框架的使用方法,基于jquery实现三级

作者: 手机版乐白家网址  发布:2019-07-10

本文实例为大家分享了jquery三级下拉菜单的具体实现代码,供大家参考,具体内容如下

本例子实现弹窗的效果:

本文为大家分享了网页框架bootstrap的简单使用方法,供大家参考,具体内容如下

在写这个的时候,首先要捋顺思路。点一个菜单的时候,其他的要闭合,点一级菜单的时候,二三级菜单要闭合,等等。
大致代码如下:

1、jquery.show.js

直接百度bootstrap可以搜到bootstrap中文网站,然后最好建议选择下载源码。

<body>
 <aside>
  <ul class="one">
   <li> <a href="#" class="a">目录A</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录B</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录C</a> </li>
  </ul>
 </aside>

//jQuery部分
<script src="js/jquery-1.8.3.min.js"></script>
<script>
  $(document).ready(function() {
   $('.a').click(function() {
    if ($(this).siblings('ul').css('display') == 'none') {
     $(this).siblings('ul').slideDown(100).children('li');
     if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
      $(this).parents('li').siblings('li').children('ul').slideUp(100);

     }
    } else {
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').slideUp(100);
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').children('li').children('ul').slideUp(100);
    }
   });
 });
</script>
</body>
/* 
 * 实现功能:点击在鼠标位置显示div 
 * 版本序号:1.0 
 */
(function($){ 
  $.fn.showDIV = function(options){ 
    var defaults = {}; 
    var options = $.extend(defaults, options); 
    var showdiv=$(this); 
    var close, title, content; 
    close=$(" 


"); title=$(" 
"); content=$(" 
"); showdiv.html(""); showdiv.append(close); showdiv.append(title); showdiv.append(content); close.html("X"); title.html(options.title); content.html(options.content); showdiv.css("display","block"); showdiv.css("position","absolute"); showdiv.css("left",($(window).width()-options.width)/2 "px"); showdiv.css("top",($(window).height()-options.height)/2 "px"); showdiv.css("width",options.width); showdiv.css("height",options.height); close.bind("click",function(){ showdiv.css("display","none"); }); }; })(jQuery);

下载完成后,将dist/css/bootstrap.min.css复制到项目的根目录下。

如果要添加样式的话,一定要注意,否则菜单可能会出现错误。
完整代码地址:
git里还有一个带有图标的案例,不点击的话是 号,菜单打开后,变为-号。
以上就是本文的全部内容,希望对大家的学习有所帮助。

2、jquery.showdiv.css

具体的模块介绍和使用在中文网站上都有讲述,这里以制作的一个简单示例为例:

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:bootstrap网页框架的使用方法,基于jquery实现三级

关键词: m.lom599.com 乐百家lbj222