嵌套列表树导航
问题描述:
我正在尝试为我的网站开发一个导航树,但没有运行它的动态安排。 问题是: 我想要打开内部UL只要点击内部LI的,我能够得到被点击的内部UI的索引,但不能全局使用该索引变量。嵌套列表树导航
- 页面重新加载每次我点击任何链接,所以有没有使用cookie的解决方案?
下面是HTML:
<ul id="menu">
<li> <a href="#">Order Management</a>
<ul id="test">
<li><a href="#" class="even">orders</a></li>
<li><a href="#" class="odd">Search Orders</a></li>
<li><a href="#" class="even">Orderdetail</a></li>
</ul>
</li>
<li> <a href="#">Discount Management</a>
<ul>
<li><a href="#" class="even">Subject</a></li>
<li><a href="#" class="odd">Category</a></li>
<li><a href="#" class="even">Publisher</a></li>
<li><a href="#" class="odd">Author</a></li>
<li><a href="#" class="even">Particular Book</a></li>
</ul>
</li>
<li> <a href="#">Upload File</a>
<ul>
<li><a href="#" class="even">Upload excel file</a></li>
</ul>
</li>
<li> <a href="#">Reports</a>
<ul>
<li><a href="#" class="even">data over view</a></li>
<li><a href="#" class="odd">Out Of Stock Product</a></li>
<li><a href="#" class="even">Invoice Report</a></li>
<li><a href="#" class="odd">SerachInvoicDispacthed</a></li>
</ul>
</li>
<li> <a href="#">Store Management</a>
<ul>
<li><a href="#" class="even">Currency</a></li>
<li><a href="#" class="odd">Add Country</a></li>
</ul>
</li>
</ul>
这里是JS:
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
var myIndex = 0;
var items = $('#menu ul').click(function() {
//e.preventDefault();
myIndex = items.index(this);
console.log('the index is:'+myIndex);
//here i got index in var myIndex
}
);
//but i can not access myIndex here , it keeps returning zero
$('#menu ul:eq('+myIndex+')').show("slow");
}
$(document).ready(function() {initMenu();});
我的账户已经被阻止,因为这个问题一次,我请求你的人,因为我非常渴望得到这个问题的解决方案。 这里是小提琴http://jsfiddle.net/Ekn2V/1/ 有没有实际的链接,但是当我使用真正的链接页面得到重载在我的struts.xml中定义,所以页面重新加载这里发生的所有由js忽略请告诉我一个cookie或类似的东西相关的解决方案。 我在java se开发方面有经验,并且我在web开发中很努力。 任何帮助将不胜感激,谢谢。
答
首先,您不想在点击A
元素后重新加载/移位,您需要禁用操作的默认浏览器行为。你可以像Click事件处理程序做到这一点:
$('#menu li a').click(function(e){
e.preventDefault();
//..
});
第二,如果你用HTML 5.1的详细信息/摘要元素去,你不需要任何的JavaScript在所有的树导航。在这里找到 https://codepen.io/dsheiko/details/MvEpXm/一个自定义树构建与细节/总结的工作示例,还具有CSS3过渡动画扩展标记。这个博客文章http://dsheiko.com/weblog/building-real-life-applications-with-functional-elements-of-html-5-2/你可以找到其他的例子和解释如何使用它与polyfill获得支持在旧的IE
你不想使用现有的用户界面?例如:http://demos.kendoui.com/web/treeview/index.html – Narek 2013-03-20 10:57:52
是的确切!但每当我点击任何链接我的网页得到重新加载(主要设计布局,不能被修改),但有一种方法显示()它使用cookie ..对不起,我忘了提及以前。 – moddelrlotes 2013-03-20 11:05:38
我不明白,请解释。或者更好地创建http://jsfiddle.net/,以便我们可以看到问题的实际行动。 – Narek 2013-03-20 11:10:44