Я боролся за то, чтобы получить аккордеон, чтобы сохранить состояние между ссылками, которых нет в меню аккордеона, и задаюсь вопросом, возможно ли это вообще. Я использую jquery-1.6.2.min.js + query-ui-1.8 .14.custom.min.js.
Я создал меню, которое имеет 3 уровня. У меня нет проблем с сохранением состояния здесь, но мне интересно, как можно сохранить состояние URL, который не содержится в меню. Например, если я нажимаю «Дополнительно» (HTML-код ниже), он правильно отображает меню аккордеона и правильный выбранный пункт меню. Однако эта страница «Дополнительно» имеет последующие отдельные страницы. Теперь моя идея состоит в том, что если щелкнуть одну из этих последующих страниц, ссылка «Advanced» в меню аккордеона должна остаться выбранной, и, таким образом, «Advanced» будет продолжать отображаться.
Я понял, что единственный способ сделать это - использовать jquery.cookie, и если щелкнуть URL-адрес меню, то файл cookie будет обновлен с помощью URL-адреса пункта меню. Если щелкнуть ссылку, которой нет в меню, файл cookie не будет обновлен, но оригинальный пункт меню останется отображенным. Однако я не могу заставить это работать.
Я использовал навигационный фильтр в функции гармошки и другие, но безуспешно.
HTML меню выглядит следующим образом:
<div class="submenu">
<ul id="accordion">
<h3 class="h3"><a href="#">System Setup</a></h3>
<div>
<ul id="accordion-syssetup">
<!-- System setup menu -->
<li>
<a href="#" class="accheader">Setup</a>
<ul>
<li><a href="/advanced.php">Advanced</a></li>
<li><a href="/general.php">General</a></li>
</ul>
</li>
<li>
<a href="#" class="accheader">Tools</a>
<ul>
<li><a href="/nslookup.php">Nslookup</a></li>
<li><a href="/ping.php">Ping</a></li>
</ul>
</li>
<li>
<a href="/system_hosts.php">Hosts</a>
</li>
</ul>
</div>
<h3 class="h3"><a href="#">Security</a></h3>
<div>
<ul id="accordion-security">
<!-- Security menu -->
<li>
<a href="#" class="accheader">User Management</a>
<ul>
<li><a href="/user.php">Users</a></li>
<li><a href="/groups.php">Groups</a></li>
</ul>
</li>
<li><a href="/certs.php">Certificates</a></li>
</ul>
</div>
</div>
jquery выглядит следующим образом:
var $j = jQuery.noConflict();
$j().ready(
function(){
// Set the cookie
var currentURL = window.location.toString().split("/");
var currentURL = currentURL[currentURL.length-1];
if ($j.cookie('menu') == null) {
$j.cookie('menu', currentURL, { expires: null, path: '/'} );
}
var menucookie = $j.cookie('menu');
// Top level
$j("#accordion").accordion({
header: 'h3.h3',
autoHeight: false,
navigation: true,
collapsible: true,
alwaysOpen: false,
active: false
});
// Second level
$j("#accordion-syssetup").accordion({
header: "a.accheader",
navigation: true,
clearStyle: true,
autoHeight: false,
collapsible: true,
alwaysOpen: false,
animated: 'slide'
});
$j("#accordion-security").accordion({
header: "a.accheader",
navigation: true,
clearStyle: true,
autoHeight: false,
collapsible: true,
alwaysOpen: false,
animated: 'slide'
});
$j("#accordion").addClass("ui-widget ui-helper-reset");
$j("#accordion").removeClass("ui-accordion").find('h3.h3').removeClass("ui-accordion-header");
var currentURL = window.location.toString().split("/");
var currentURL = currentURL[currentURL.length-1];
if (!currentURL || currentURL == '') {
currentURL = 'index.php';
}
$j("#accordion:has(a)").each ( function () {
if ( currentURL ) {
$j('a[href$="' + currentURL + '"]').addClass("sb-menu-active");
}
});
// Keep track of the cookie
$j("#accordion a").each ( function () {
url = this.toString().split("/");
url = url[url.length-1];
if($j('a[href$="' + url + '"]').hasClass("sb-menu-active") == true) {
hasclass = true;
$j.cookie('menu', currentURL, { expires: null, path: '/'} );
menucookie = $j.cookie('menu');
return false;
}
});
// Display the menu
$j(".submenu").show();
}
);
Вы заметите, что я также добавляю и удаляю определенные классы по косметическим причинам. Я также добавляю класс для активной ссылки меню. Я удалил навигационный фильтр из вышеупомянутого, но я попробовал следующее:
navigationFilter: function () {
//Accordion NavigationFilter
var locationHrefArray = location.href.split("/");
var locationLastString = locationHrefArray[locationHrefArray.length - 1].toLowerCase();
if ( this.href.toLowerCase() == locationLastString ) {
return true;
} else if (locationLastString.match( menucookie )) {
return true;
} else {
return this.href.toLowerCase() == location.href.toLowerCase();
}
}
Я понимаю, что возвращение истины, когда совпадение меню не соответствует действительности, но я не уверен, что еще делать. У вас есть какие-нибудь предложения? Я n00b, поэтому я могу делать все неправильно.
Спасибо