需要 jQuery 导航帮助

Question

我有一个基于 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>

注意：我尝试使用 jquery ui 手风琴执行此操作，但除其他外，我与页面上的另一个手风琴存在样式冲突。

您可以在此处查看它的实际效果：它是侧边栏导航。

感谢您的任何帮助。

Answer 1

我会向“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 & Techniques</a>
        ...
    </li>
</ul>

toggle() 实际上调用 hide()/show()，因此在 onready 中在所需的“ul”上调用 show()

jQuery(window).ready(function() {

    jQuery('li[name=products] ul').show();

});

Answer 2

循环 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;
});

Answer 3

我从上面的 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();
}); 

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

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

效果很好，感谢您的帮助。