Jquery 悬停时的引导可单击菜单_Jquery_Css_Twitter Bootstrap

Jquery 悬停时的引导可单击菜单

jquery css twitter-bootstrap

Jquery 悬停时的引导可单击菜单,jquery,css,twitter-bootstrap,Jquery,Css,Twitter Bootstrap,我已经使用jquery定制了引导导航，通过它，您不必单击以启用下拉菜单，只需悬停即可。然而，我正试图得到它，所以第一个菜单是可点击的，因为目前它不是。例如，目前博客是不可点击的，但我希望它是。其他类别可单击有没有人有这方面的经验？它是建立在wordpress上的。我用来允许菜单在悬停时显示的jquery是： jQuery(document).ready(function() { var mq = window.matchMedia('(min-width: 768px)');

我已经使用jquery定制了引导导航，通过它，您不必单击以启用下拉菜单，只需悬停即可。然而，我正试图得到它，所以第一个菜单是可点击的，因为目前它不是。例如，目前博客是不可点击的，但我希望它是。其他类别可单击

有没有人有这方面的经验？它是建立在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');
    }
  };


});

你试过添加一个

$("#blog").click(function(){
    window.location.href="blog.html";
});

以及添加一个

或者代替“.dropdown toggle”，您可以使用触发下拉列表问题的元素的id，使用matchMedia/media查询来完成您正在执行的操作：

许多触摸设备的媒体查询与桌面相同

触摸时不存在悬停。IOS将鼠标悬停，点击一次将触发下拉菜单。点击两次即可到达链接，但安卓系统不能以这种方式工作。因此，在触摸设备上，这些下拉菜单将无法访问。如何正确执行此操作：

在Android、IOS和Windows 8手机上检测触摸和不触摸

删除上的属性数据切换。下拉列表a链接--删除这允许单击操作该切换

如果不接触，则在if语句中包装removing属性

将悬停脚本包装在NOTOUCH if语句中

为触摸设备提供备用功能，以便它们可以进入第一个菜单项目

演示：编辑：

CSS

.touch .mobile-link {display:block;}
.no-touch .mobile-link {display:none}

脚本

带有回退链接的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和其他设备上进行测试。应该可以顺利工作。

您有JSFIDLE吗？我看不出它在手机上是如何工作的，父链接没有指向它的href。它只是展开和折叠子级别。（在android上测试）请仔细阅读。触摸设备上没有悬停，因此单击可以打开链接，也可以切换下拉菜单，但不能同时执行这两项操作。在这个设置中，它切换触摸设备和非触摸设备上的下拉列表，以便您可以单击父设备或使用下拉列表。但是，让它仅在桌面上工作又有什么意义呢？在我看来，菜单应该在所有设备中具有相同的功能。所以，如果你不能让它在任何地方都工作，最好不要使用引导程序来构建它……与引导程序无关。单击菜单在桌面和触摸屏上都可以使用，悬停功能在触摸屏设备上不起作用，因此您必须找到解决办法。做更多的学习。我不是说鼠标悬停和点击，我是说在桌面上做父项工作（导航），而不是在手机上导航。更多的学习没有什么可做的。这个概念从一开始就是错误的。本主题的标题为“悬停时引导可点击菜单”。您提供了桌面解决方案，但不提供移动解决方案。

.touch .mobile-link {display:block;}
.no-touch .mobile-link {display:none}

/* ----- 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

 <!-- 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>