아코디언 메뉴에없는 링크를 통해 상태를 유지하고 심지어 가능할 지 궁금한 아코디언을 얻기 위해 나는 싸우고있었습니다. jquery- 1.6.2.min.js + query-ui-1.8.14.custom.min.js.메뉴에 포함되지 않은 링크에 대한 메뉴에 Jquery 아코디언 유지
나는 3 단계의 메뉴를 만들었습니다. 여기에 상태를 유지하는 데 문제가 없지만 메뉴에 포함되지 않은 URL의 상태를 어떻게 유지하는지 궁금합니다. 예를 들어 '고급'(아래 HTML 코드)을 클릭하면 아코디언 메뉴와 올바른 선택한 메뉴 항목이 올바르게 표시됩니다. 그러나이 '고급'페이지에는 이후 별도의 페이지가 있습니다. 이제는 내 생각에 이러한 후속 페이지 중 하나를 클릭하면 아코디언 메뉴의 '고급'링크가 선택된 상태로 유지되므로 '고급'이 계속 표시됩니다.
이 작업을 수행하는 유일한 방법은 jquery.cookie를 사용하는 것이고 메뉴 URL을 클릭하면 쿠키가 메뉴 항목의 URL로 업데이트된다는 것입니다. 메뉴에없는 URL을 클릭하면 쿠키가 업데이트되지 않지만 원래 메뉴 항목은 그대로 유지됩니다. 그러나 나는 이것을 작동시키지 못한다.
나는 아코디언 기능과 다양한 다른 방법으로 navigationFilter를 사용했지만 행운은 없습니다.
메뉴 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를 제거했지만 나는 다음을 시도 않았다
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();
}
}
내가 진정한 반환하기는 menucookie이 일치 할 때 올바르지 않습니다하지만 난 할 다른 확실하지 오전 수집합니다. 의견 있으십니까? 임 n00b 그래서 내가 다 잘못하고있을 수도 있습니다.
감사