Question

我正在尝试为我的网站开发导航树，但是它的动态安排没有运气。问题是：我想在点击内部LI时打开内部UL，我能够获得所点击的内部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开发的noob。任何帮助将不胜感激，谢谢。

Answer 1

首先，您不想在单击A元素后重新加载/移位，您需要禁用该操作的默认浏览器行为。您可以在单击事件处理程序中执行此操作，如：

$('#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中的支持

嵌套列表的树导航

1 个答案: