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 аккордеоном, но у меня есть стайлинг конфликт с другим аккордеоном на странице среди других вещей.

Вы можете увидеть это в действии here: Это навигационная панель боковой панели.

Спасибо за любую помощь.

Answer 1

Я бы добавить имя или класс к элементам «LI», так что вы можете настроить таргетинг на вкладку, которую и называют "шоу() на нем в 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> 

тумблер () на самом деле вызывает скрыть()/шоу(), так что в onready шоу вызова() на желаемом «ул»

jQuery(window).ready(function() { 

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

}); 

Answer 2

петля над uls вместо массы, действующей на них. Если вы можете выбрать активный 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> 

Работы приятно спасибо за помощь.