jquery+bootstrap做的下拉菜单(不使用bootstrap的js插件)亲测 原创


  • :
  • 04-09 16:06
  • :
  • 27次
  • :
  • 0条
  • 2赞

简介不使用bootstrap的JS插件,只使用bootstrap的CSS框架,自己用jquery代码实现的下拉菜单效果。

bootstrap是一款非常流行的CSS框架,使用bootstrap可以让我们web前端开发变得非常简单。

但站长在使用的时候,只喜欢使用CSS框架代码,不喜欢同时使用它自带的JS框架,因为web项目里本身就已经使用了好多JS,不想让web变得太“臃肿”。

这一篇,站长要说的就是如何自己写代码来实现bootstrap的下拉菜单特效,下面是在线演示地址:

bootstrap下拉菜单在线演示

下面站长来说下如何实现:

第一步:HTML代码,完全照着bootstap的结构来写:

<UL class="list-inline">
    <li class="list-inline-item dropdown">
        <a class="dropdown-toggle text-dark" href="javascript:void(0)">菜单一</a>
        <div class="dropdown-menu border-primary" style="left:auto;right:3px">
            <a class="dropdown-item" href="#">子菜单1</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">子菜单2</a>
        </div>
    </li>
</UL>

因为我们要使用bootstap里的CSS样式,所以在做下拉菜单的时候,要按照bootstrap里的格式来。

第二步:编写jquery代码,来实现菜单的点击后显示和隐藏:

$(".dropdown").each(function() {
  $(this).children(".dropdown-toggle").on("click", function(e) {
    e.preventDefault();    //阻止点击后的默认操作
    $(document).trigger("click");//加上这一句后,可以实现同时只显示一个菜单的子菜单
    var _this=$(this).parent(".dropdown");
    var _menu=$(this).next(".dropdown-menu");
    _this.toggleClass("show");
    _menu.toggleClass("show");
    e.stopPropagation(); //阻止冒泡
    //下面是实现点击网页其它地方后,隐藏子菜单的效果
    $(document).one("click", function() {
      _this.removeClass("show");
      _menu.toggleClass("show");
    });
  });
});

很简单吧?没有什么难点的,直接把上面的代码复制到我们的JS文件里,就能实现和bootstrap里一模一样的下拉菜单效果了。



您正在找的文章可能是: