需要jQuery导航协助 [英] jQuery Navigation Assistance Needed

问题描述

我有一个要修改的基于jQuery的手风琴样式导航.

I have a jQuery based accordion style navigation that I am trying to modify.

它使用以下代码:

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

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

I need to be able to keep it open to the section the active page is on. I can highlight the active link with CSS, but could use some good advice for keep it open to the active section.

导航如下:

<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手风琴进行此操作，但是除其他外，我与页面上的另一手风琴存在样式冲突.

Note: I tried doing this with the jquery ui accordion, but I have a styling conflict with another accordion on the page among other things.

您可以在此处看到它:这是侧边栏导航

You can see it in action here: It is the sidebar navigation.

感谢您的帮助.

推荐答案

我将名称或类添加到'li'元素中，以便您可以定位所需的标签并在onready上对其调用'show()' :

I'd add a name or class to the 'li' elements so you can target the tab you want and call 'show()' on it in onready:

<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>

toggle()实际上会调用hide()/show()，因此在就绪状态下，在所需的"ul"上调用show()

toggle() actually calls hide()/show(), so in onready call show() on the desired 'ul'

jQuery(window).ready(function() {

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

});

这篇关于需要jQuery导航协助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！