需要jQuery导航帮助

我有一个基于jQuery的手风琴风格的导航，我正在尝试修改它

它使用以下代码：

$('.interior #subContent > ul > li > a.drop').click(function(){
    $(this).parent().children('ul').toggle("slow");
    return false;
});

我需要能够保持它对活动页面所在的部分打开。我可以用CSS突出显示活动链接，但是可以使用一些好的建议来保持它对活动部分的开放

导航如下：

<ul>
    <li><a href="#" class="drop">Products</a>
      <ul>
        <li><a href="printing-newproducts.html">New Products</a></li>
        <li><a href="printing-inksystems.html">Ink Systems</a></li>
        <li><a href="printing-specialtyinks.html">Specialty Inks</a></li>
        <li><a href="printing-environmentalinks.html">Environmental Inks</a></li>
        <li><a href="printing-whiteplastisolinks.html">White Plastisol Inks</a></li>
        <li><a href="printing-plastisolbases.html">Plastisol Bases</a></li>
        <li><a href="printing-plastisolinkseries.html">Plastisol Ink Series</a></li>
        <li><a href="printing-pvcfreewaterbase.html">Non-PVC Water-Based
            System</a></li>
        <li><a href="printing-modifersadditives.html">Modifiers &amp; Additives</a></li>
        <li><a href="printing-completeproductlisting.html">Complete Product
            Listing</a></li>
      </ul>
    </li>
    <li><a href="#" class="drop">Technical Information</a>
      <ul>
        <li><a href="printing-technicaldatasheets.html">Technical Data Sheets</a></li>
        <li><a href="printing-msds.html">MSDS</a></li>
        <li><a href="printing-onlinecolorcard.html">Online Color Card</a></li>
        <li><a href="printing-mixingsystemsoftware.html">Mixing System Software</a></li>
        <li><a href="printing-technicalbulletins.html">Technical Bulletins</a></li>
      </ul>
    </li>
    <li><a href="#" class="drop">Tips &amp; Techniques</a>
      <ul>
        <li><a href="printing-tradetips.html">Trade Tips</a></li>
        <li><a href="printing-galleryoftechniques.html">Gallery of Techniques</a></li>
      </ul>
    </li>
  </ul>

注意：我试着用jQueryUIAccordion做这件事，但是我与页面上的另一个accordion有样式冲突

您可以看到它的作用：它是侧栏导航

---

感谢您的帮助。

在uls上循环，而不是对其施加质量作用。如果您可以选择给定ul下的活动li，则不要收缩它

编辑：我认为这会让你接近你想要的，这是一个有点干编码，所以我不是100%，测试建议

$('.interior #subContent > ul > li > a.drop').click(function(){
    $(this).parent().children('ul').each(function() {
        if ($('li.active', this).length == 0) { 
            $(this).show("slow");
        } else {
            $(this).toggle("slow"); 
        }
    });
    return false;
});

---

我会向'li'元素添加一个名称或类，这样您就可以将所需的选项卡作为目标，并在onready中对其调用'show（）'

<ul>
    <li name="products" ><a href="#" class="drop">Products</a>
        ...
    </li>
    <li name="technical-information"><a href="#" class="drop">Technical Information</a>
        ...
    </li>
    <li name="tips" ><a href="#" class="drop">Tips &amp; Techniques</a>
        ...
    </li>
</ul>

---

我从上面的Bryan和jshali那里得到了一些非常可靠的信息，我想发布最终的解决方案，结果非常好

    $('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
     return false;
});

$(window).ready(function() {
$('li.products ul').show();
    $('li.technical ul').show();
    $('li.tips ul').show();
}); 

然后我将适当的类添加到list元素中。添加类比添加名称容易得多：

<li class="products"><a href="#" class="drop">Products</a>

---

非常好，谢谢你的帮助。

Bryan，我对jQuery还不太熟悉。你介意提供更多关于如何完成的细节吗？fmz：尝试一下上面的代码，看看它对你有什么帮助，我在这里的浏览器中写的，所以它可能并不完美。请注意，这确实需要您在任何活动页面上为li设置类。Bryan，我正在努力使这项工作正常进行。你提出的解决方案是有道理的，但我一直无法让它正常工作。当我单击该元素时，列表将打开，但不会对活动操作打开，也不能在不刷新页面的情况下再次关闭它。您提出的解决方案是合理的，但我无法使其正常工作。当我单击元素时，列表会打开，但它不会对活动操作打开，也不能在不刷新页面的情况下再次关闭它。我想我不理解这个问题：“我需要能够对活动页面所在的部分保持打开状态”我假设此控件将位于多个页面上，列表中相应的部分已经打开了，我终于找到了答案。我使用了我的原始代码并修改了您添加的内容。请参阅下面我的最终解决方案。不过，我相信你的回答，因为如果没有你的投入，我永远也想不到答案。谢谢

<li class="products"><a href="#" class="drop">Products</a>