Question

jQuery 手风琴

2010-05-13

203

javascript jquery accordion

我想知道是否有人可以就我试图简化的折叠面板提供一些基本建议。我有一个可用的版本，但它似乎过于复杂。这是我的新 JS。

   $(document).ready(function() {
     $("#themes li ul").hide();
     $("#themes li").hover(function() {
       $("ul").show();
         }, function() {
         $("li ul").hide();
   });

标记如下所示：

<ul>
  <li>Tier 1
    <ul>
      <li>Tier 2</li>
      <li>Tier 2</li>
    </ul>
  </li>
  <li>Tier 1
    <ul>
      <li>Tier 2</li>
      <li>Tier 2</li>
    </ul>
   </li>
</ul>

我的脚本运行正常。但是当任何父 li 悬停时，它会显示所有子 ul，而当未悬停时，它会隐藏所有子 ul。只是不确定如何才能实现 A.) 仅当悬停在特定 li 上时才显示 li > ul。并且 B.) 仅当悬停另一个 li (而不是其本身) 时才隐藏显示的 li > ul。示例 + 解释将特别有用！谢谢！！

Answer 1

为什么不能使用 JQuery UI Accordion 。这将解决您的问题。这里的 js 和 html 非常简单

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

jQuery(document).ready(function(){
    $('#accordion').accordion();
});

已编辑

您的代码的问题是，当鼠标悬停在任何一个 li 上时，它会隐藏并显示任何“li”组件内的所有“ul”组件。以下是解决此问题的代码，它将隐藏/显示当前“li”内的“ul”

            $(document).ready(function() {
             $("#themes li ul").hide();
             $("#themes li").hover(function() {

               $(this).find("ul").show();
                 }, function() {
                 $(this).find("ul").hide();
           });
          });