2014-11-20 74 views
0
父頁面

我有一個使用this plugin從而使菜單下拉,當用戶將鼠標懸停在父鏈接,使其成爲引導網站(我知道這不適合移動設備)。懸停下拉菜單:單擊父鏈接進入

我想編輯代碼或引導的代碼,這樣當用戶在父鏈接上實際點擊,它會帶他們到父頁面。我試着用了幾個小時的代碼搞亂,但最終什麼也沒有。

這裏是插件的代碼:

/** 
* @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); 

回答

0

如果我理解正確的話,這可能是答案的按鈕

<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