Нужна помощь в навигации по 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', чтобы вы могли выбрать нужную вкладку и вызвать 'show ()' на ней в 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 (), поэтому в onready вызовите show () для нужного 'ul'

jQuery(window).ready(function() {

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

});

Answer 2

зацикливайся на улс вместо того, чтобы воздействовать на них массой. Если вы можете выбрать активный li под данным ul, то не уменьшайте его.

Редактировать: Я думаю, что это даст вам почти то, что вы хотите, это немного сухой код, поэтому я не на 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

Я получил действительно солидную информацию от Брайана и 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>

Работает хорошо, спасибо за помощь.