根据当前页面 URL 打开特定的 Jquery 手风琴面板
Open particular Jquery accordion pan based on current page URL
我有一个Jquery accordion
,手风琴在列表元素中有pan、list元素和锚标签,锚标签的href
属性有当前页URL。 我只希望当一个页面被访问时,一个特定的面板(包含该锚标记)会自动打开并且它的列表元素应该变为活动状态。我有代码可以制作手风琴和最后的片段使列表元素处于活动状态。但列表元素未激活且面板未打开。我想我很想念一些东西。
这是代码:
<script>
$.ajax({
url: "/categories",
type: 'GET',
success: function(data) {
var content = "";
content += '<div id="category-navigation">';
for (i = 0; i < data.length; i++) {
content += '<div class="head">';
content += '<label class="categoryLables">' + data[i].title;
content += '</label>';
content += '<div>';
content += '<div class="boardsMargin">';
content += '<ul>';
for (j = 0; j < data[i].assigned_boards.length; j++) {
content += '<li>';
content += "<a href='/#categories/" + data[i].id + "/boards/" + data[i].assigned_boards[j].id + "'>";
content += data[i].assigned_boards[j].name;
content += '</a>';
content += '</li>';
}
content += '</ul>';
content += '</div>';
content += '</div>';
content += '</div>';
}
content += '</div>';
$("#myNavigation").html("");
$("#myNavigation").html(content);
$('.head').accordion({
heightStyle: "content",
active: true,
collapsible: true
});
$('.head li').each(function() {
li = $(this);
a = $('a', li);
myUrl = "";
myUrl += (location.protocol + "//" + location.hostname +
(location.port && ":" + location.port));
myUrl += (a.attr('href'));
if (myUrl == window.location.href) {
console.log(myUrl);
console.log(window.location.href);
li.addClass('active');
}
});
}
});
</script>
我的问题和这个question很相似。我正在关注它的第一个答案。
为了看得更清楚,这是我手风琴的照片。
附带说明:我在 ruby 2.2.1 和 rails 4.1
中工作
这段代码应该可以解决问题:
$(document).find("a[href*='" + '/' + window.location.pathname + "']").parents(".head").find("h3").trigger("click");
我有一个Jquery accordion
,手风琴在列表元素中有pan、list元素和锚标签,锚标签的href
属性有当前页URL。 我只希望当一个页面被访问时,一个特定的面板(包含该锚标记)会自动打开并且它的列表元素应该变为活动状态。我有代码可以制作手风琴和最后的片段使列表元素处于活动状态。但列表元素未激活且面板未打开。我想我很想念一些东西。
这是代码:
<script>
$.ajax({
url: "/categories",
type: 'GET',
success: function(data) {
var content = "";
content += '<div id="category-navigation">';
for (i = 0; i < data.length; i++) {
content += '<div class="head">';
content += '<label class="categoryLables">' + data[i].title;
content += '</label>';
content += '<div>';
content += '<div class="boardsMargin">';
content += '<ul>';
for (j = 0; j < data[i].assigned_boards.length; j++) {
content += '<li>';
content += "<a href='/#categories/" + data[i].id + "/boards/" + data[i].assigned_boards[j].id + "'>";
content += data[i].assigned_boards[j].name;
content += '</a>';
content += '</li>';
}
content += '</ul>';
content += '</div>';
content += '</div>';
content += '</div>';
}
content += '</div>';
$("#myNavigation").html("");
$("#myNavigation").html(content);
$('.head').accordion({
heightStyle: "content",
active: true,
collapsible: true
});
$('.head li').each(function() {
li = $(this);
a = $('a', li);
myUrl = "";
myUrl += (location.protocol + "//" + location.hostname +
(location.port && ":" + location.port));
myUrl += (a.attr('href'));
if (myUrl == window.location.href) {
console.log(myUrl);
console.log(window.location.href);
li.addClass('active');
}
});
}
});
</script>
我的问题和这个question很相似。我正在关注它的第一个答案。
为了看得更清楚,这是我手风琴的照片。
附带说明:我在 ruby 2.2.1 和 rails 4.1
中工作这段代码应该可以解决问题:
$(document).find("a[href*='" + '/' + window.location.pathname + "']").parents(".head").find("h3").trigger("click");