bootstrap4鼠标经过触发下拉菜单

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

下拉菜单鼠标 Bootstrap4 dropdown dropdown-menu dropdown-toggle

打开边栏(ESC) 关闭边栏(ESC)

很简单，css中加入如下代码

.dropdown:hover>.dropdown-menu {
    display: block;
}
.dropdown>.dropdown-toggle:active {
    pointer-events: none;
}

修改完成后发现一个小问题，菜单和文字间有一点空隙，鼠标移动到空隙后菜单就隐藏了。
我们再修改 dropdown-menu 的样式，加一个 mt-0 的样式就没有空隙了。

<div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
    ...
</div>

成功实现鼠标经过展开下拉菜单，但是有一个问题，主导航的链接会失效，我们可以用下面的方法解决这个问题。

用js实现：

<script>  
    $(document).ready(function(){
        //关闭click.bs.dropdown.data-api事件，使顶级菜单可点击
        $(document).off('click.bs.dropdown.data-api');
    });  
    $(document).ready(function(){
        dropdownOpen();//调用
    });
    /**
     * 鼠标划过就展开子菜单，免得需要点击才能展开
     */
    function dropdownOpen() {    
        var $dropdownLi = $('li.dropdown');  
        $dropdownLi.mouseover(function() {
            $(this).addClass('open');
        }).mouseout(function() {
            $(this).removeClass('open');
        });
    }
    </script>

需要多写一条css

1	`.open .dropdown-menu{display:` `block;}`

赏

前一篇

bootstrap4手机导航栏图标样式怎么修改？

后一篇

bootstrap4基础页面

相关推荐

Bootstrap4中popper.min.js的作用

Bootstrap4 | 2020-05-27 14829

popper.min.js 用于设置弹窗、提示、下拉菜单，是第三方插件，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 <script src="bootstrap-4.4.1/js/popper.min.js" ></script> <script s...

Bootstrap4 .ml-auto元素居右.mr-auto元素居左

Bootstrap4 | 2019-11-25 9114

Bootstrap4 导航栏元素居右 Bootstrap 4正解： .ml-auto元素居右 .mr-auto元素居左