请选择 进入手机版 | 继续访问电脑版
繁体中文

巅峰霸主

 找回密码
 立即注册

QQ登录

只需一步,快速开始

bootstrap 4 鼠标移入显示移出除隐藏的下拉导航菜单实现方法

[复制链接]
烈火大地 发表于 2018-1-5 14:02:17 | 显示全部楼层 |阅读模式

游客只能显示部分内容,请登录后查看帖子完整内容!!!注册完全免费。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
bootstrap 4 依然不能实现导航鼠标移入显示移出隐藏的下拉导航菜单,只有鼠标点击之后才可以显示下一级导航菜单,其实这个相对来说还是蛮简单的。大家研究一下bootstrap的JavaScript就会发现比较简单了。bootstrap 4 实现鼠标移入移出效果,导航代码是这样的:
  1. <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
  2.   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
  3.   <a class="navbar-brand hidden-lg-up" href="./">爱是你我软件商城</a>
  4.   <div class="container">
  5.     <div class="collapse navbar-collapse" id="navbarsExampleDefault">
  6.       <ul class="navbar-nav mr-auto">
  7.         <li class="nav-item active"> <a class="nav-link" href="./">首页 <span class="sr-only">(current)</span></a> </li>
  8.         
  9.         <!--{foreach from=$categories item=cat name=foo}-->
  10.         <li {if $smarty.foreach.foo.first}{/if} class="nav-item dropdown"> <a rel="nofollow" class="nav-link dropdown-toggle" href="{$cat.url}" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{$cat.name|escape:html}</a>
  11.           <div class="dropdown-menu" aria-labelledby="dropdown01">
  12.             <!--{foreach from=$cat.cat_id item=child}-->
  13.             <a class="dropdown-item" href="{$child.url}" rel="nofollow">{$child.name|escape:html}</a>
  14.             <!--{/foreach}-->
  15.           </div>
  16.         </li>
  17.         <!--{/foreach}-->
  18.         
  19.       </ul>
  20.     </div>
  21.   </div>
  22. </nav>
复制代码
所有的导航代码里面必须要包含dropdown这个class,然后在上面代码的下面添加如下js代码即可:
  1. <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" integrity="sha256-tXuytmakTtXe6NCDgoePBXiKe1gB+VA3xRvyBs/sq94=" crossorigin="anonymous"></script>
  2. <script>
  3. $('li.dropdown').mouseover(function() {
  4.      $(this).addClass('show');
  5. }).mouseout(function() {
  6.         $(this).removeClass('show');
  7. });
  8. </script>
复制代码


需另外引入jQuery,因为bootstrap 4 默认引入的jQuery版本可能太高,bootstrap4默认支持jQuery的版本是jQuery1.9以上,需要再引入1.4~1.12.4版本的jQuery,否则不起作用。如果是bootstrap 3版本的导航,那么只需要将上面js代码里面的show改为open即可,如下:
  1. <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" integrity="sha256-tXuytmakTtXe6NCDgoePBXiKe1gB+VA3xRvyBs/sq94=" crossorigin="anonymous"></script>
  2. <script>
  3. $('li.dropdown').mouseover(function() {
  4.      $(this).addClass('open');
  5. }).mouseout(function() {
  6.         $(this).removeClass('open');
  7. });
  8. </script>
复制代码

演示地址可以查看www.asneel.com
回复

使用道具 举报

QQ|小黑屋|手机版|Archiver|巅峰霸主 ( 京ICP备12023415号-2 )

声明:本站的任何信息和内容仅代表作者的立场和观点,与巅峰霸主网无关。

禁止在巅峰霸主网发布任何与《中华人民共和国法律》相抵触的言论!

GMT+8, 2018-9-22 21:12 , Processed in 0.133502 second(s), 28 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表