bootstrap4鼠标经过触发下拉菜单
web Bootstrap4 2019-11-26 2912 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

6426648 2611 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)

很简单,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


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


版权声明:本篇文章来源于网络。 来源链接

相关推荐
Bootstrap4中popper.min.js的作用
Bootstrap4 | 2020-05-27 12218
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 7261
Bootstrap4 导航栏元素居右 Bootstrap 4正解: .ml-auto元素居右 .mr-auto元素居左
评论:0条
评论加载中...
发表评论