嵌套列表树导航

我正在尝试为我的网站开发一个导航树，但没有运行它的动态安排。问题是：我想要打开内部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开发中很努力。任何帮助将不胜感激，谢谢。

来源

2013-03-20 moddelrlotes

你不想使用现有的用户界面？例如：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

首先，您不想在点击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

来源

2017-08-16 08:53:35

嵌套列表树导航

回答

相关问题