jQuery手风琴控制空节

Question

我有一个jQuery手风琴，我使用ui主题造型。我的问题是，我怎么能有一个没有子节的部分，并且在鼠标覆盖时不会扩展？我使用鼠标悬停作为我的触发器。

例如：

Home部分下面没有任何内容。我希望它在徘徊时保持倒塌。单击时，它应导航到href目标（它会执行）。

初始化代码：

<script type="text/javascript"> 
    $(function () { 
        $("#accordion").accordion({ 
            event: "mouseover", 
            alwaysOpen: false,  
            autoHeight: false, 
            navigation: true, 
        }); 
    }); 
</script> 

标记（为简洁起见缩短）：

<div id="accordion"> 
   <h3><a class="heading" href="~/Home">Home</a></h3> 
   <div> 
   </div> 
   <h3><a href="#">Browse</a></h3> 
   <div> 
      <li><a href="http://www.php.net/">PHP</a></li> 
      <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li> 
      <li><a href="http://www.python.org/">Python</a></li> 
      <li><a href="http://www.perl.org/">PERL</a></li> 
      <li><a href="http://java.sun.com/">Java</a></li> 
      <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li> 
   </div> 
</div> 

样式表直接来自jQuery ui主题库。

提前谢谢。

瑞克

Answer 1

我进行了一些更改以使其正常工作，主要是向您的主页头添加ID并向手风琴添加collapsible: true。

然后，在创建手风琴后添加这些：

$('#home').unbind('mouseover');//don't accordion on mouse over
$('#accordion').accordion('activate', 0);//close the home accordion

有关工作示例，请参阅此处：http://jsfiddle.net/ryleyb/mywfV/

Answer 2

您可以将事件处理程序绑定到手风琴的change事件：http://jqueryui.com/demos/accordion/#event-change。触发时，请检查Home标头，如果是已选择的标头，请使用activate方法将其关闭：http://jqueryui.com/demos/accordion/#method-activate