嵌套列表樹導航

我正在嘗試爲我的網站開發一個導航樹，但沒有運行它的動態安排。問題是：我想要打開內部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

嵌套列表樹導航

回答

相關問題