jQuery手风琴

Question

我只是想知道是否有人可以提供有关我要简化的手风琴的一些基本建议。 有一个可用的版本，但似乎过于复杂。 这是我的新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> 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();
           });
          });