jQuery Accordion navigationFilter открыть заголовок с текущей страницей - PullRequest
Новая
       11

jQuery Accordion navigationFilter открыть заголовок с текущей страницей

0 голосов
/ 04 ноября 2010

здесь достаточно быстро, но только для экспертов по jQuery.

Какой лучший способ заставить аккордеон jQuery всегда открывать заголовок, содержащий ссылку на страницу, на которой сейчас находится пользователь?

Текущий код: 

  $(function () {
        $('ul.drawers').accordion({
            header: 'H2.drawer-handle',
            selectedClass: 'open',
            collapsible: true,
            active: false,
            event: 'mouseover',
            navigation: true,
        });
});

$('ul.drawers').accordion('option', 'navigationFilter', function(){   
        //Your code for the NavigationFilter }); 
</script>

Всего наилучшего, Роберт

, вот HTML: 

<ul class="drawers"> 
<li class="drawer"> 
<h2 class="drawer-handle"><a class="lahtine" href="http://www.viking.ee/en/outwardwindows/">Outward Opening Windows</a></h2> 
<div class="menu-outward-opening-windows-container"><ul id="menu-outward-opening-windows" class="menu"><li id="menu-item-789" class="menu-item menu-item-type-post_type menu-item-789"><a href="http://www.viking.ee/en/windows/aluclad/">Aluminium Clad Wooden Windows</a></li> 
<li id="menu-item-790" class="menu-item menu-item-type-post_type menu-item-790"><a href="http://www.viking.ee/en/windows/doubleglazedwindow/">Double Glazed Window</a></li> 
<li id="menu-item-791" class="menu-item menu-item-type-post_type menu-item-791"><a href="http://www.viking.ee/en/windows/tripleglazing/">Energy Efficient Triple Glazed Window</a></li> 
<li id="menu-item-792" class="menu-item menu-item-type-post_type menu-item-792"><a href="http://www.viking.ee/en/windows/secure/">Secured By Design</a></li> 
</ul></div></li> 
<li class="drawer"> 
<h2 class="drawer-handle"><a href="http://www.viking.ee/en/inwardwindows/">Inward Opening Windows</a></h2> 
<div class="menu-inward-opening-windows-container"><ul id="menu-inward-opening-windows" class="menu"><li id="menu-item-793" class="menu-item menu-item-type-post_type menu-item-793"><a href="http://www.viking.ee/en/windows/woodenwindows/">Inward Opening Wooden Windows</a></li> 
<li id="menu-item-794" class="menu-item menu-item-type-post_type menu-item-794"><a href="http://www.viking.ee/en/windows/timberthermalwindow/">Timber Thermal Window</a></li> 
</ul></div></li> 
<li class="drawer"> 
<h2 class="drawer-handle"><a href="http://www.viking.ee/en/selection/">Additional Selection</a></h2> 
<div class="menu-additional-selection-container"><ul id="menu-additional-selection" class="menu"><li id="menu-item-795" class="menu-item menu-item-type-post_type menu-item-795"><a href="http://www.viking.ee/en/windows/fireguard/">Viking Fireguard Window</a></li> 
<li id="menu-item-796" class="menu-item menu-item-type-post_type menu-item-796"><a href="http://www.viking.ee/en/windows/slidingsash/">Traditional Sliding Sash</a></li> 
</ul></div></li> 
<li class="drawer"> 
<h2 class="drawer-handle"><a href="http://www.viking.ee/en/exteriordoors/">Exterior Doors</a></h2> 
<div class="menu-exterior-doors-2-container"><ul id="menu-exterior-doors-2" class="menu"><li id="menu-item-797" class="menu-item menu-item-type-post_type current-menu-item menu-item-797"><a href="http://www.viking.ee/en/doors/alucladdoors/">Viking Double Glazed Alu-Clad Door</a></li> 
<li id="menu-item-798" class="menu-item menu-item-type-post_type menu-item-798"><a href="http://www.viking.ee/en/doors/tripleglazed/">Energy Efficient Triple Glazed Wooden Doors</a></li> 
</ul></div></li> 
<li class="drawer last"> 
<h2 class="drawer-handle"><a href="http://www.viking.ee/en/slidingdoors/">Sliding/Folding Doors</a></h2> 
<div class="menu-sliding-and-folding-doors-container"><ul id="menu-sliding-and-folding-doors" class="menu"><li id="menu-item-799" class="menu-item menu-item-type-post_type menu-item-799"><a href="http://www.viking.ee/en/doors/sliding/">The Sliding Door</a></li> 
</ul></div></li> 
</ul>

1 Ответ

0 голосов
/ 04 ноября 2010

Не видя оставшуюся часть кода / html или не зная, какой плагин accordion вы специально используете.

Я бы сказал, что самым простым способом было бы сравнить document.location.pathname (или разобрать из него только имя файла.html), а затем вы можете сделать пару вещей.

1) запустить функцию, используя вышеописанное, чтобы добавить требуемый класс к элементу, который соответствует вашему текущему местоположению (url), чтобы при инициализации меню он знал, что расширять

2) запустить функцию после инициализации меню, чтобы определить, какой заголовок содержит вашу текущую страницу, и вызвать событие для ее расширения. Вы используете аккордеон JQuery UI? если так, то синтаксис: 

       `$(yourMenuSelector).accordion("activate",indexOfHeaderToOpen);`

Рад помочь, если вы можете предоставить больше информации, но это должно привести к вращению колес.

...