Bootstrap4多级菜单

Bootstrap4更新后，很多原有的功能都有个变更，比如说btn-default就消失不见了，完全搞不懂开发者是什么个套路。而多级菜单又出现了一个新的问题，即在Dropdown的菜单里点击一项，呼出另外一个菜单时，原菜单消失，新菜单不显示。

仔仔细细的阅读了一遍源码以及官方文稿，找到这样的一个内容：

决定在菜单消失之前，通过响应该事件，如果判定呼出源处于菜单之中，则阻止菜单消失。随即查看了一下bootstrap4中dropdown文件的源码，找到这样一段：

const DATA_KEY                 = 'bs.dropdown'
const EVENT_KEY                = `.${DATA_KEY}`

/*...省略*/

const Event = {
  HIDE             : `hide${EVENT_KEY}`,
 /*...省略*/
}

// Event.HIDE 的值即为：hide.bs.dropdown
const hideEvent = $.Event(Event.HIDE, relatedTarget)
$(parent).trigger(hideEvent)
if (hideEvent.isDefaultPrevented()) {
  continue
}

也就是说，只需要在代码中执行下面一句:

e.preventDefault();

即可阻止弹窗消失，剩下就关于如何判定点击事件发生的源是否为我们想要的元素即可。我们可以在HTML代码中设置一个data-标识，然后在js中判断即可，代码如下：

HTML代码：增加data-submenu="true"

<a class="dropdown-toggle" data-submenu="true" href="#" data-toggle="dropdown" aria-haspopup="true"
   aria-expanded="false" data-boundary="window">{{m3Menu.title}}</a>

JS代码：源元素可以通过下面的代码获取

var winEvent = window.event;
if (winEvent) {
    var srcEle = winEvent.srcElement;
    if ($(srcEle).data("submenu")) {
        e.preventDefault();
    }
}

然后有个小bug：即如果一个下拉菜单中，有两个可以再呼出下一级菜单，第一个呼出后，点击第二个，则第一个呼出的菜单不会消失，这就需要更进一步的判定了。

完整JS代码：

$(".dropright,.dropdown").on("hide.bs.dropdown", function (e) {
    var winEvent = window.event;
    if (winEvent) {
        var srcEle = winEvent.srcElement;
        if ($(srcEle).data("submenu")) {
            e.preventDefault();
        }
    }
});

需要注意的：在jquery中参数的e，和window.event并不是同一个对象。

扫描二维码关注公众号，回复： 131098 查看本文章

猜你喜欢