1

我正在尝试为我的网站开发导航树，但它的动态排列没有运气。问题是：我想在单击内部 LI 时打开内部 UL，我能够获取单击的内部 Ul 的索引，但不能全局使用该索引变量。

  • 每次我点击任何链接时，页面都会重新加载，所以有没有使用 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 开发的菜鸟。任何帮助将不胜感激，谢谢。

4

1 回答 1

0

首先，您不想在单击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-16T08:53:35.430 回答