我已经使用jquery自定义了引导程序导航,而不是单击以启用下拉菜单,您可以简单地悬停.但是,我试图得到它所以第一个菜单是可点击的,因为目前它不是.例如,目前BLOG不可点击,但我希望它是.其他类别是可点击的.
有人在bootstrap上有这方面的经验吗?它建立在wordpress上.我用来允许菜单在悬停时显示的jquery是:
jQuery(document).ready(function() { var mq = window.matchMedia('(min-width: 768px)'); if (mq.matches) { jQuery('ul.navbar-nav li').addClass('hovernav'); } else { jQuery('ul.navbar-nav li').removeClass('hovernav'); }; /* The addClass/removeClass also needs to be triggered on page resize <=> 768px */ if (matchMedia) { var mq = window.matchMedia('(min-width: 768px)'); mq.addListener(WidthChange); WidthChange(mq); } function WidthChange(mq) { if (mq.matches) { jQuery('ul.navbar-nav li').addClass('hovernav'); } else { jQuery('ul.navbar-nav li').removeClass('hovernav'); } }; });
css是:
@media (min-width: 768px) { .navbar-nav .caret { display:none; } .navbar-nav .open ul { display:none; } .navbar-default .navbar-nav > .open > a,.navbar-default .navbar-nav > .open > a:hover,.navbar-default .navbar-nav > .open > a:focus,.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:hover,.navbar-default .navbar-nav > .active > a:focus { color:#555; background:none; } .navbar-inverse .navbar-nav > .open > a,.navbar-inverse .navbar-nav > .open > a:hover,.navbar-inverse .navbar-nav > .open > a:focus,.navbar-inverse .navbar-nav > .active > a,.navbar-inverse .navbar-nav > .active > a:hover,.navbar-inverse .navbar-nav > .active > a:focus { color:#969696; background:none; } .navbar-default .navbar-nav > .hovernav > a { color:#555; } .navbar-inverse .navbar-nav > .hovernav > a { color:#969696; } .navbar-default .navbar-nav > .hovernav:hover > a,.navbar-default .navbar-nav > .hovernav:hover > a:hover,.navbar-default .navbar-nav > .hovernav:hover > a:focus { color:#333; background:transparent; } .navbar-inverse .navbar-nav > .hovernav:hover > a,.navbar-inverse .navbar-nav > .hovernav:hover > a:hover,.navbar-inverse .navbar-nav > .hovernav:hover > a:focus { color:#F7F7F7; background:transparent; } .navbar-default .navbar-nav > li:hover { background:#e7e7e7; } .navbar-inverse .navbar-nav > li:hover { background:#080808; } .navbar-nav .hovernav:hover > .dropdown-menu { display:block; } }
Christina.. 6
使用matchMedia/media查询来完成您正在执行的操作时遇到的问题:
许多触摸设备的媒体查询与桌面相同.
悬停不存在触摸.IOS采取悬停,一次点击触发下拉2点击到链接,BUUUT android不能这样工作.因此,在触摸设备上,这些下拉菜单将无法访问.如何正确地做到这一点:
检测Android,IOS和Windows 8手机上的触摸和非触摸.
删除.dropdown链接上的属性数据切换 - 删除此选项允许单击在该切换上工作.
如果没有触摸,则将删除属性包装在if语句中
将悬停脚本包装在no-touch if语句中
有触摸设备的后备,以便他们可以到达第一个菜单项
编辑:http://jsbin.com/ejAXoda/1/edit
CSS
.touch .mobile-link {display:block;} .no-touch .mobile-link {display:none}
脚本(S)
/* ----- Detect touch or no-touch */ /* Detects touch support and adds appropriate classes to html and returns a JS object * Copyright (c) 2013 Izilla Partners Pty Ltd * http://www.izilla.com.au * Licensed under the MIT license * https://coderwall.com/p/egbgdw */ var supports = (function () { var a = document.documentElement, b = "ontouchstart" in window || navigator.msMaxTouchPoints; if (b) { a.className += " touch"; return { touch: true } } else { a.className += " no-touch"; return { touch: false } } })(); // -------- DO the stuff only on no-touch devices only if ($("html").hasClass("no-touch")) { // ------- REMOVE THE DATA TOGGLE ONLY ON "no-touch" devices and get the link to work $('.dropdown > a').removeAttr("data-toggle"); // Hover dropdown for Bootstrap 3.x wrapped in this no-touch var /* * Project: Bootstrap Hover Dropdown * Author: Cameron Spear * Contributors: Mattia Larentis * * Dependencies: Bootstrap's Dropdown plugin, jQuery * * A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience. * * License: MIT * * http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ */ (function (e, t, n) { if ("ontouchstart" in document) return; var r = e(); e.fn.dropdownHover = function (n) { r = r.add(this.parent()); return this.each(function () { var i = e(this), s = i.parent(), o = { delay: 500, instantlyCloseOthers: !0 }, u = { delay: e(this).data("delay"), instantlyCloseOthers: e(this).data("close-others") }, a = e.extend(!0, {}, o, n, u), f; s.hover(function (n) { if (!s.hasClass("open") && !i.is(n.target)) return !0; a.instantlyCloseOthers === !0 && r.removeClass("open"); t.clearTimeout(f); s.addClass("open"); s.trigger(e.Event("show.bs.dropdown")) }, function () { f = t.setTimeout(function () { s.removeClass("open"); s.trigger("hide.bs.dropdown") }, a.delay) }); i.hover(function () { a.instantlyCloseOthers === !0 && r.removeClass("open"); t.clearTimeout(f); s.addClass("open"); s.trigger(e.Event("show.bs.dropdown")) }); s.find(".dropdown-submenu").each(function () { var n = e(this), r; n.hover(function () { t.clearTimeout(r); n.children(".dropdown-menu").show(); n.siblings().children(".dropdown-menu").hide() }, function () { var e = n.children(".dropdown-menu"); r = t.setTimeout(function () { e.hide() }, a.delay) }) }) }) }; e(document).ready(function () { e('[data-hover="dropdown"]').dropdownHover() }) })(jQuery, this); } //END IF no-touch for hover script & removeAttr for the links to work
带有回退链接的示例HTML:
我在Android上测试了这个.在授予/接受之前,在IOS,Windows 8和其他设备上进行测试.应该顺利工作.
使用matchMedia/media查询来完成您正在执行的操作时遇到的问题:
许多触摸设备的媒体查询与桌面相同.
悬停不存在触摸.IOS采取悬停,一次点击触发下拉2点击到链接,BUUUT android不能这样工作.因此,在触摸设备上,这些下拉菜单将无法访问.如何正确地做到这一点:
检测Android,IOS和Windows 8手机上的触摸和非触摸.
删除.dropdown链接上的属性数据切换 - 删除此选项允许单击在该切换上工作.
如果没有触摸,则将删除属性包装在if语句中
将悬停脚本包装在no-touch if语句中
有触摸设备的后备,以便他们可以到达第一个菜单项
编辑:http://jsbin.com/ejAXoda/1/edit
CSS
.touch .mobile-link {display:block;} .no-touch .mobile-link {display:none}
脚本(S)
/* ----- Detect touch or no-touch */ /* Detects touch support and adds appropriate classes to html and returns a JS object * Copyright (c) 2013 Izilla Partners Pty Ltd * http://www.izilla.com.au * Licensed under the MIT license * https://coderwall.com/p/egbgdw */ var supports = (function () { var a = document.documentElement, b = "ontouchstart" in window || navigator.msMaxTouchPoints; if (b) { a.className += " touch"; return { touch: true } } else { a.className += " no-touch"; return { touch: false } } })(); // -------- DO the stuff only on no-touch devices only if ($("html").hasClass("no-touch")) { // ------- REMOVE THE DATA TOGGLE ONLY ON "no-touch" devices and get the link to work $('.dropdown > a').removeAttr("data-toggle"); // Hover dropdown for Bootstrap 3.x wrapped in this no-touch var /* * Project: Bootstrap Hover Dropdown * Author: Cameron Spear * Contributors: Mattia Larentis * * Dependencies: Bootstrap's Dropdown plugin, jQuery * * A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience. * * License: MIT * * http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ */ (function (e, t, n) { if ("ontouchstart" in document) return; var r = e(); e.fn.dropdownHover = function (n) { r = r.add(this.parent()); return this.each(function () { var i = e(this), s = i.parent(), o = { delay: 500, instantlyCloseOthers: !0 }, u = { delay: e(this).data("delay"), instantlyCloseOthers: e(this).data("close-others") }, a = e.extend(!0, {}, o, n, u), f; s.hover(function (n) { if (!s.hasClass("open") && !i.is(n.target)) return !0; a.instantlyCloseOthers === !0 && r.removeClass("open"); t.clearTimeout(f); s.addClass("open"); s.trigger(e.Event("show.bs.dropdown")) }, function () { f = t.setTimeout(function () { s.removeClass("open"); s.trigger("hide.bs.dropdown") }, a.delay) }); i.hover(function () { a.instantlyCloseOthers === !0 && r.removeClass("open"); t.clearTimeout(f); s.addClass("open"); s.trigger(e.Event("show.bs.dropdown")) }); s.find(".dropdown-submenu").each(function () { var n = e(this), r; n.hover(function () { t.clearTimeout(r); n.children(".dropdown-menu").show(); n.siblings().children(".dropdown-menu").hide() }, function () { var e = n.children(".dropdown-menu"); r = t.setTimeout(function () { e.hide() }, a.delay) }) }) }) }; e(document).ready(function () { e('[data-hover="dropdown"]').dropdownHover() }) })(jQuery, this); } //END IF no-touch for hover script & removeAttr for the links to work
带有回退链接的示例HTML:
<!-- Static navbar --> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="http://getbootstrap.com" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">Blog <b class="caret"></b></a> <ul class="dropdown-menu"> <!-- add for touch they won't be able to get to the link --> <li class="mobile-link"><a href="blog.html">Latest News</a></li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="./">Default</a></li> <li><a href="../navbar-static-top/">Static top</a></li> <li><a href="../navbar-fixed-top/">Fixed top</a></li> </ul> </div><!--/.nav-collapse --> </div>
我在Android上测试了这个.在授予/接受之前,在IOS,Windows 8和其他设备上进行测试.应该顺利工作.