JQueryUI手風琴鼠標懸停幫助

我正在使用jQueryUI演示示例，我試圖在鼠標懸停效果上打開並在開始時關閉所有li。但由於某種原因，它只是做了默認的1倒塌，點擊合攏 http://jqueryui.com/demos/accordion/#mouseover JQueryUI手風琴鼠標懸停幫助

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>jQuery UI Example Page</title> 
     <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" /> 
     <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script> 
     <script type="text/javascript"> 
      $(function(){ 

       // Accordion 
       $("#accordion").accordion({ header: "h3" }); 
      $("#accordion").accordion({ event: "mouseover" });     
       //hover states on the static widgets 
       $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); } 
       ); 

      }); 
     </script> 
     <style type="text/css"> 
      /*demo page css*/ 
      body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} 
      .demoHeaders { margin-top: 2em; } 
      #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} 
      #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} 
      ul#icons {margin: 0; padding: 0;} 
      ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} 
      ul#icons span.ui-icon {float: left; margin: 0 4px;} 
     </style>  
    </head> 
    <body> 

     <!-- Accordion --> 
     <h2 class="demoHeaders">Accordion</h2> 
     <div id="accordion"> 
      <div> 
       <h3><a href="#">First</a></h3> 
       <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
      </div> 
      <div> 
       <h3><a href="#">Second</a></h3> 
       <div>Phasellus mattis tincidunt nibh.</div> 
      </div> 
      <div> 
       <h3><a href="#">Third</a></h3> 
       <div>Nam dui erat, auctor a, dignissim quis.</div> 
      </div> 
     </div> 




    </body> 
</html>

來源

2011-05-30 acctman

你有兩個調用初始化手風琴：

$("#accordion").accordion({ header: "h3" }); 
$("#accordion").accordion({ event: "mouseover" });

這就是爲什麼mouseover效果不工作。該選項合併成一個初始化調用：

$("#accordion").accordion({ header: "h3", event: "mouseover" });

此外，如果你想所有章節的開始崩潰，加上active選項並將其設置爲false：

$("#accordion").accordion({ 
    header: "h3", 
    event: "mouseover", 
    active: false 
});

這裏有一個工作示例： http://jsfiddle.net/HjK5T/

來源

2011-05-30 03:57:11

JQueryUI手風琴鼠標懸停幫助

回答

相關問題