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手风琴鼠标悬停帮助

回答

相关问题