1. 首页
  2. 问答
  3. 手风琴导航打开和关闭mouseover/mouseleave jquery

手风琴导航打开和关闭mouseover/mouseleave jquery

2011-09-21 105 views
0

我正在使用jquery手风琴插件，我需要手风琴菜单帮助，菜单显示鼠标悬停的子菜单链接，但只有在悬停在另一主链接后才能关闭主链接。当鼠标悬停在鼠标上方时，我想让子链接显示，但在将鼠标移出主链接后也要隐藏。
我将不胜感激您的帮助。见下面的代码。手风琴导航打开和关闭mouseover/mouseleave jquery

下面是HTML

<head> 
    <title>Accordion Test</title> 

    <link rel="stylesheet" href="accordionDemo.css" /> 
    <script type="text/javascript" src="../lib/jquery.js"></script> 
    <script type="text/javascript" src="../lib/chili-1.7.pack.js"></script> 
    <script type="text/javascript" src="../lib/jquery.easing.js"></script> 
    <script type="text/javascript" src="../lib/jquery.dimensions.js"></script> 
    <script type="text/javascript" src="../jquery.accordion.js"></script> 

    <script type="text/javascript"> 
    jQuery().ready(function(){ 
     // simple accordion with mouseover event 
     jQuery('#navigation').accordion({ 
      active: false, 
      header: '.head', 
      navigation: true, 
      event: 'mouseover', 
      fillSpace: true, 
      animated: 'easeslide' 
     }); 
    }); 
    </script> 
</head> 
<body> 
<div id="wrapper"> 



<div id="navBar"> 
      <ul id="navigation"> 
       <li> 
        <a class="head" href="?p=1">About SfT</a> 
        <ul> 
         <li><a href="?p=1.1">sub1</a></li> 
         <li><a href="?p=1.2">sub2</a></li> 
         <li><a href="?p=1.3">sub3</a></li> 
         <li><a href="?p=1.4.1">sub4</a></li> 
         <li><a href="?p=1.4.2">sub4.1</a></li> 
         <li><a href="?p=1.4.3">sub4.2</a></li> 
         <li><a href="?p=1.4.4">sub4.3</a></li> 
         <li><a href="?p=1.5">sub5</a></li> 
        </ul> 
       </li> 
       <li> 
        <a class="head" href="?p=1.2">Your Life</a> 
        <ul> 
         <li><a href="?p=1.2.1">sub1</a></li> 
         <li><a href="?p=1.2.2">sub2</a></li> 
         <li><a href="?p=1.2.3">sub3</a></li> 
         <li><a href="?p=1.2.4">sub4</a></li> 
         <li><a href="?p=1.2.5">sub5</a></li> 
        </ul> 
       </li> 
       <li> 
        <a class="head" href="?p=1.3">Your Health</a> 
        <ul> 
         <li><a href="?p=accordionTest2.html">sub1</a></li> 
         <li><a href="?p=1.3.3">sub2</a></li> 
         <li><a href="?p=1.3.4">sub3</a></li> 
         <li><a href="?p=1.3.5">sub4</a></li> 
         <li><a href="?p=1.3.6">sub5</a></li> 
        </ul> 
       </li> 
           <li> 
        <a class="head" href="?p=1.3">Your Call</a> 
        <ul> 
         <li><a href="?p=1.4.1">sub1</a></li> 
         <li><a href="?p=1.4.2">sub2</a></li> 
         <li><a href="?p=1.4.3">sub3</a></li> 
         <li><a href="?p=1.4.4">sub4</a></li> 
         <li><a href="?p=1.4.5">sub5</a></li> 
        </ul> 
       </li> 

      </ul> 
     </div> 
    </div> <!--end wrapper--> 
    </body> 
</html>

这是CSS

* { margin: 0; padding: 0; } 
body { margin: 0; padding: 0; font-size: small; color: #333 } 




#wrapper { 
    width:600px; 
    margin:0 auto; 
    padding-top:100px; 
    } 

#navBar { 
    height:380px; 
    margin-bottom:1em; 
} 

#navigation { 
    margin:0px; 
    padding:0px; 
    text-indent:0px; 
    /*background-color:#EFEFEF; sublists background color */ 
    width:200px; 
} 
#navigation a.head { /* list header */ 
    height: 40px; 
    cursor:pointer; 
    background: url(collapsed.gif) no-repeat scroll 3px 4px; /* list header bg color and img settings */ 
    color:#999; 
    display:block; 
    font-weight:bold; 
    font-size: 22px; 
    margin:0px; 
    padding:0px; 
    text-indent:20px; 
    text-decoration: none; 
} 
#navigation a.head:hover { 
    color:#900; 
} 
#navigation a.selected { 
    background-image: url(expanded.gif); 
    color:#900; 
} 
#navigation a.current { 
    color: #F60;; 
    font-weight:bold; 
} 
#navigation ul { 
    margin:0px; 
    padding:0px; 
    text-indent:0px; 
} 
#navigation li { 
    list-style:none outside none; 
    /*display:inline;*/ 
    padding:5px 0 5px 0; 
} 
#navigation li li a { 
    color:#000000; 
    display:block; 
    font-size:16px; 
    text-indent:20px; 
    text-decoration: none; 
} 
#navigation li li a:hover { /* sublist hover state bg and color */ 
    color:#F60;; 
    font-weight:bold; 
}

这是accodion插件代码

/* 
* jQuery UI Accordion 1.6 
* 
* Copyright (c) 2007 Jörn Zaefferer 
* 
* http://docs.jquery.com/UI/Accordion 
* 
* Dual licensed under the MIT and GPL licenses: 
* http://www.opensource.org/licenses/mit-license.php 
* http://www.gnu.org/licenses/gpl.html 
* 
* Revision: $Id: jquery.accordion.js 4876 2008-03-08 11:49:04Z joern.zaefferer $ 
* 
*/ 

;(function($) { 

// If the UI scope is not available, add it 
$.ui = $.ui || {}; 

$.fn.extend({ 
    accordion: function(options, data) { 
     var args = Array.prototype.slice.call(arguments, 1); 

     return this.each(function() { 
      if (typeof options == "string") { 
       var accordion = $.data(this, "ui-accordion"); 
       accordion[options].apply(accordion, args); 
      // INIT with optional options 
      } else if (!$(this).is(".ui-accordion")) 
       $.data(this, "ui-accordion", new $.ui.accordion(this, options)); 
     }); 
    }, 
    // deprecated, use accordion("activate", index) instead 
    activate: function(index) { 
     return this.accordion("activate", index); 
    } 
}); 

$.ui.accordion = function(container, options) { 

    // setup configuration 
    this.options = options = $.extend({}, $.ui.accordion.defaults, options); 
    this.element = container; 

    $(container).addClass("ui-accordion"); 

    if (options.navigation) { 
     var current = $(container).find("a").filter(options.navigationFilter); 
     if (current.length) { 
      if (current.filter(options.header).length) { 
       options.active = current; 
      } else { 
       options.active = current.parent().parent().prev(); 
       current.addClass("current"); 
      } 
     } 
    } 

    // calculate active if not specified, using the first header 
    options.headers = $(container).find(options.header); 
    options.active = findActive(options.headers, options.active); 

    if (options.fillSpace) { 
     var maxHeight = $(container).parent().height(); 
     options.headers.each(function() { 
      maxHeight -= $(this).outerHeight(); 
     }); 
     var maxPadding = 0; 
     options.headers.next().each(function() { 
      maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height()); 
     }).height(maxHeight - maxPadding); 
    } else if (options.autoheight) { 
     var maxHeight = 0; 
     options.headers.next().each(function() { 
      maxHeight = Math.max(maxHeight, $(this).outerHeight()); 
     }).height(maxHeight); 
    } 

    options.headers 
     .not(options.active || "") 
     .next() 
     .hide(); 
    options.active.parent().andSelf().addClass(options.selectedClass); 

    if (options.event) 
     $(container).bind((options.event) + ".ui-accordion", clickHandler); 
}; 

$.ui.accordion.prototype = { 
    activate: function(index) { 
     // call clickHandler with custom event 
     clickHandler.call(this.element, { 
      target: findActive(this.options.headers, index)[0] 
     }); 
    }, 

    enable: function() { 
     this.options.disabled = false; 
    }, 
    disable: function() { 
     this.options.disabled = true; 
    }, 
    destroy: function() { 
     this.options.headers.next().css("display", ""); 
     if (this.options.fillSpace || this.options.autoheight) { 
      this.options.headers.next().css("height", ""); 
     } 
     $.removeData(this.element, "ui-accordion"); 
     $(this.element).removeClass("ui-accordion").unbind(".ui-accordion"); 
    } 
} 

function scopeCallback(callback, scope) { 
    return function() { 
     return callback.apply(scope, arguments); 
    }; 
} 

function completed(cancel) { 
    // if removed while animated data can be empty 
    if (!$.data(this, "ui-accordion")) 
     return; 
    var instance = $.data(this, "ui-accordion"); 
    var options = instance.options; 
    options.running = cancel ? 0 : --options.running; 
    if (options.running) 
     return; 
    if (options.clearStyle) { 
     options.toShow.add(options.toHide).css({ 
      height: "", 
      overflow: "" 
     }); 
    } 
    $(this).triggerHandler("change.ui-accordion", [options.data], options.change); 
} 

function toggle(toShow, toHide, data, clickedActive, down) { 
    var options = $.data(this, "ui-accordion").options; 
    options.toShow = toShow; 
    options.toHide = toHide; 
    options.data = data; 
    var complete = scopeCallback(completed, this); 

    // count elements to animate 
    options.running = toHide.size() == 0 ? toShow.size() : toHide.size(); 

    if (options.animated) { 
     if (!options.alwaysOpen && clickedActive) { 
      $.ui.accordion.animations[options.animated]({ 
       toShow: jQuery([]), 
       toHide: toHide, 
       complete: complete, 
       down: down, 
       autoheight: options.autoheight 
      }); 
     } else { 
      $.ui.accordion.animations[options.animated]({ 
       toShow: toShow, 
       toHide: toHide, 
       complete: complete, 
       down: down, 
       autoheight: options.autoheight 
      }); 
     } 
    } else { 
     if (!options.alwaysOpen && clickedActive) { 
      toShow.toggle(); 
     } else { 
      toHide.hide(); 
      toShow.show(); 
     } 
     complete(true); 
    } 
} 

function clickHandler(event) { 
    var options = $.data(this, "ui-accordion").options; 
    if (options.disabled) 
     return false; 

    // called only when using activate(false) to close all parts programmatically 
    if (!event.target && !options.alwaysOpen) { 
     options.active.parent().andSelf().toggleClass(options.selectedClass); 
     var toHide = options.active.next(), 
      data = { 
       instance: this, 
       options: options, 
       newHeader: jQuery([]), 
       oldHeader: options.active, 
       newContent: jQuery([]), 
       oldContent: toHide 
      }, 
      toShow = options.active = $([]); 
     toggle.call(this, toShow, toHide, data); 
     return false; 
    } 
    // get the click target 
    var clicked = $(event.target); 

    // due to the event delegation model, we have to check if one 
    // of the parent elements is our actual header, and find that 
    if (clicked.parents(options.header).length) 
     while (!clicked.is(options.header)) 
      clicked = clicked.parent(); 

    var clickedActive = clicked[0] == options.active[0]; 

    // if animations are still active, or the active header is the target, ignore click 
    if (options.running || (options.alwaysOpen && clickedActive)) 
     return false; 
    if (!clicked.is(options.header)) 
     return; 

    // switch classes 
    options.active.parent().andSelf().toggleClass(options.selectedClass); 
    if (!clickedActive) { 
     clicked.parent().andSelf().addClass(options.selectedClass); 
    } 

    // find elements to show and hide 
    var toShow = clicked.next(), 
     toHide = options.active.next(), 
     //data = [clicked, options.active, toShow, toHide], 
     data = { 
      instance: this, 
      options: options, 
      newHeader: clicked, 
      oldHeader: options.active, 
      newContent: toShow, 
      oldContent: toHide 
     }, 
     down = options.headers.index(options.active[0]) > options.headers.index(clicked[0]); 

    options.active = clickedActive ? $([]) : clicked; 
    toggle.call(this, toShow, toHide, data, clickedActive, down); 

    return false; 
}; 

function findActive(headers, selector) { 
    return selector != undefined 
     ? typeof selector == "number" 
      ? headers.filter(":eq(" + selector + ")") 
      : headers.not(headers.not(selector)) 
     : selector === false 
      ? $([]) 
      : headers.filter(":eq(0)"); 
} 

$.extend($.ui.accordion, { 
    defaults: { 
     selectedClass: "selected", 
     alwaysOpen: true, 
     animated: 'slide', 
     event: "click", 
     header: "a", 
     autoheight: true, 
     running: 0, 
     navigationFilter: function() { 
      return this.href.toLowerCase() == location.href.toLowerCase(); 
     } 
    }, 
    animations: { 
     slide: function(options, additions) { 
      options = $.extend({ 
       easing: "swing", 
       duration: 300 
      }, options, additions); 
      if (!options.toHide.size()) { 
       options.toShow.animate({height: "show"}, options); 
       return; 
      } 
      var hideHeight = options.toHide.height(), 
       showHeight = options.toShow.height(), 
       difference = showHeight/hideHeight; 
      options.toShow.css({ height: 0, overflow: 'hidden' }).show(); 
      options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{ 
       step: function(now) { 
        var current = (hideHeight - now) * difference; 
        if ($.browser.msie || $.browser.opera) { 
         current = Math.ceil(current); 
        } 
        options.toShow.height(current); 
       }, 
       duration: options.duration, 
       easing: options.easing, 
       complete: function() { 
        if (!options.autoheight) { 
         options.toShow.css("height", "auto"); 
        } 
        options.complete(); 
       } 
      }); 
     }, 
     bounceslide: function(options) { 
      this.slide(options, { 
       easing: options.down ? "bounceout" : "swing", 
       duration: options.down ? 1000 : 200 
      }); 
     }, 
     easeslide: function(options) { 
      this.slide(options, { 
       easing: "easeinout", 
       duration: 700 
      }) 
     } 
    } 
}); 

})(jQuery);

来源

2011-09-21 rolando.pdl

回答

1

试试这个：

jQuery('#navigation > li').mouseout(function(){ 
    jQuery('#navigation').accordion("activate",false); 
});

也为将来的兼容性，您应该改变

jQuery().ready(...

到

jQuery(document).ready(...

来源

2011-09-21 20:54:00

0

我认为这是你在找什么。退房this fiddle

// simple accordion with mouseover event 
jQuery('#navigation').accordion({ 
    active: false, 
    header: '.head', 
    navigation: true, 
    event: 'mouseover', 
    fillSpace: true, 
    animated: 'easeslide', 
    collapsible: true 
}); 

$('#navigation').mouseleave(function(){ 
    $("#navigation").accordion({ active: false}); 
});

来源

2011-09-21 20:56:59

+0

感谢您回应并包括的jsfiddle例如，效果很好的jsfiddle但是当我在本地测试鼠标在工作，但在鼠标离开不要（我使用的是Firefox）。我是否需要上传到服务器以从那里进行测试？ –

+0

无视以前的评论。我只是上传到服务器，我得到了相同的结果，它不会工作:( –

相关问题

 相关问题