Question

我有一个使用this plugin的Bootstrap网站，以便当用户将鼠标悬停在父链接上时菜单会下降（我知道这不适合移动设备）。

我想编辑该代码或Bootstrap的代码，以便当用户实际点击父链接时，它会将它们带到父页面。我试着搞乱了几个小时的代码，但结果却没有。

以下是插件的代码：

/**
 * @preserve
 * Project: Bootstrap Hover Dropdown
 * Author: Cameron Spear
 * Version: v2.0.11
 * Contributors: Mattia Larentis
 * Dependencies: Bootstrap's Dropdown plugin, jQuery
 * Description: A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
 * License: MIT
 * Homepage: http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/
 */
;(function ($, window, undefined) {
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function (options) {
    // don't do anything if touch is supported
    // (plugin causes some issues on mobile)
    if('ontouchstart' in document) return this; // don't want to affect chaining

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function () {
        var $this = $(this),
            $parent = $this.parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            showEvent   = 'show.bs.dropdown',
            hideEvent   = 'hide.bs.dropdown',
            // shownEvent  = 'shown.bs.dropdown',
            // hiddenEvent = 'hidden.bs.dropdown',
            settings = $.extend(true, {}, defaults, options, data),
            timeout;

        $parent.hover(function (event) {
            // so a neighbor can't open the dropdown
            if(!$parent.hasClass('open') && !$this.is(event.target)) {
                // stop this event, stop executing any code
                // in this callback but continue to propagate
                return true;
            }

            openDropdown(event);
        }, function () {
            timeout = window.setTimeout(function () {
                $parent.removeClass('open');
                $this.trigger(hideEvent);
            }, settings.delay);
        });

        // this helps with button groups!
        $this.hover(function (event) {
            // this helps prevent a double event from firing.
            // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
            if(!$parent.hasClass('open') && !$parent.is(event.target)) {
                // stop this event, stop executing any code
                // in this callback but continue to propagate
                return true;
            }

            openDropdown(event);
        });

        // handle submenus
        $parent.find('.dropdown-submenu').each(function (){
            var $this = $(this);
            var subTimeout;
            $this.hover(function () {
                window.clearTimeout(subTimeout);
                $this.children('.dropdown-menu').show();
                // always close submenu siblings instantly
                $this.siblings().children('.dropdown-menu').hide();
            }, function () {
                var $submenu = $this.children('.dropdown-menu');
                subTimeout = window.setTimeout(function () {
                    $submenu.hide();
                }, settings.delay);
            });
        });

        function openDropdown(event) {
            $allDropdowns.find(':focus').blur();

            if(settings.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $parent.addClass('open');
            $this.trigger(showEvent);
        }
    });
};

$(document).ready(function () {
    // apply dropdownHover to all elements with the data-hover="dropdown" attribute
    $('[data-hover="dropdown"]').dropdownHover();
});
})(jQuery, this);

Answer 1

如果我理解正确，这可能是答案

在按钮中添加链接

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
    <a href="http://stackoverflow.com">Dropdown parent link</a>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Dropdown link</a></li>
    <li><a href="#">Dropdown link</a></li>
    <li><a href="#">Dropdown link</a></li>
   </ul>
</div>

在$ this.hover函数之后插件中的

添加：

$this.click(function(){
     var href=$(this).find('a').attr('href');
     window.location=href;
})

<强> DEMO

悬停下拉列表：单击父链接将转到父页面

1 个答案: