jQuery 折叠导航菜单的保存状态

Question

我想保存树视图菜单的状态。我一直在关注这里的答案，尤其是这个：

Save State of Treeview Menu

我已成功保存到 localStorage，但无法根据保存的数据加载我的页面。

我对方法的大致理解是：

附加唯一 CSS class 以唯一标识包含打开菜单的元素（在我的例子中为 '#has-sub active'）
将 css class 保存到本地存储
在页面加载时检索本地存储变量以打开相同的元素

虽然我不明白负载概念是如何工作的。在我的菜单 javascript 代码中，我只在单击菜单元素时添加 #has-sub active class。

在页面加载时，我的本地存储有一个值为 '#has-sub active' 的变量 openMenu，我想将其应用于在上一页上单击的同一元素。但是我不知道我可以使用什么机制或元素属性来识别相同的元素，因为在页面加载时我的 Javascript 添加的 classes 被删除了，我不能将 'openMenu' 样式 class 硬编码到我的 HTML 显然活动菜单项将更改。

我下面的代码，我现在只尝试让它与第一个子菜单项一起工作，而不是第二个。

我也不确定我是否将 $(document).ready(loadSettings); 放在脚本中的正确位置。

编辑： 在此处添加了 jsfiddle jsfiddle

jQuery(document).ready(function($){

    // Call this when you open and close a menu
    function saveSettings(openMenuClassName) {
        // Store value in localStorage
        localStorage.setItem('openMenu', openMenuClassName)
    }

    function loadSettings () {
       // Get value from localStorage
       var openMenu = localStorage.getItem('openMenu');
       if (openMenu) $(openMenu).slideDown('normal');
    }

    // Check for the saved setting on page ready
    $(document).ready(loadSettings);

    //Check if first child has sub-menu
    $('#cssmenu > ul > li:has(ul)').addClass("has-sub");

    //Behaviour
    $('#cssmenu > ul > li > a').click(function() {

        //Each time an element is click load the next DOM element into variable
        var checkElement = $(this).next();

        //Remove 'Active' from all classes and add to element clicked 
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');

        //Check if element is UL AND if element is visible
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {

            //TRUE - has sub-menu and is visible therefore collapse and remove active
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }

        //Check if element is UL AND if element is not visible
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

            //TRUE - has sub-menu and is not visible therefore collapse open sub-menu and
            //$('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            saveSettings('#has-sub active');
        }

        if (checkElement.is('ul')) {
            return false;
        } else {
            return true;    
        }
    });

    //Check if second child has sub-menu
    $('#cssmenu > ul > li > ul > li:has(ul)').addClass("has-sub");

    //Behaviour
    $('#cssmenu > ul > li > ul > li > a').click(function() {

        //Each time an element is click load the next DOM element into variable
        var checkElement = $(this).next();

        //Remove 'Active' from all classes and add to element clicked 
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');

        //Check if element is UL AND if element is visible
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {

            //TRUE - has sub-menu and is visible therefore collapse and remove active
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }

        //Check if element is UL AND if element is not visible
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

            //TRUE - has sub-menu and is not visible therefore collapse open sub-menu and
            //$('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }

        if (checkElement.is('ul')) {
            return false;
        } else {
            return true;    
        }
    });
});

Answer 1

好的，首先您应该在获取菜单时将活动 class 添加到元素。在 html 中，为每个标签提供一个 id，该 id 将用于获取该特定元素的引用。

var menu = $("#"+activeMenu); //========> get the selected menu
menu.closest('li').addClass('active'); //=============> Add active class to to.

然后你必须调用所选菜单的子 UL 并像这样简单地在其上应用 slideDown。

var ul =  menu.next(); //==============> Get the child UL of the selected menu
if (menu) ul.slideDown('normal'); //======> slidedown the child UL of the selected

完整代码：

Html:

<div id="cssmenu">

  <ul>

    <li>
      <a id="news" href="https://www.myexamplewebsite99.com/kernal_category/news/">News</a>
      <ul>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/studio-news/">Studio</a></li>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/independent-and-cult/">Independent &amp; Cult</a>    </li>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/world-cinema/">World Cinema</a></li>
      </ul>
    </li>
    <li><a id="discussion" href="https://www.myexamplewebsite99.com/kernal_category/discussion/">Discussion</a>
      <ul>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/history/">History</a></li>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/theory-and-debate/">Theory &amp; Debate</a></li>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/reviews/">Reviews</a></li>
      </ul>
    </li>
    <li><a id="business" href="https://www.myexamplewebsite99.com/kernal_category/business/">Business</a>
      <ul>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/funding/">Funding</a></li>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/box-office/">Box Office</a></li>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/marketing/">Marketing</a></li>
      </ul>
    </li>
    <li><a id="filmmaking"  href="https://www.myexamplewebsite99.com/kernal_category/filmmaking/">Filmmaking</a>
      <ul>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/development/">Development</a></li>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/pre-production/">Pre-Production</a></li>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/production/">Production</a>
          <ul>
            <li><a href="https://www.myexamplewebsite99.com/kernal_category/cinematography/">Cinematography</a></li>
            <li><a href="https://www.myexamplewebsite99.com/kernal_category/lighting/">Lighting</a></li>
            <li><a href="https://www.myexamplewebsite99.com/kernal_category/grip/">Grip</a></li>
          </ul>
        </li>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/post-production/">Post-Production</a>
          <ul>
            <li><a href="https://www.myexamplewebsite99.com/kernal_category/vfx/">VFX</a></li>
            <li><a href="https://www.myexamplewebsite99.com/kernal_category/editing/">Editing</a></li>
            <li><a href="https://www.myexamplewebsite99.com/kernal_category/colour-grading/">Colour Grading</a></li>
            <li><a href="https://www.myexamplewebsite99.com/kernal_category/sound/">Sound</a></li>
            <li><a href="https://www.myexamplewebsite99.com/kernal_category/titles/">Titles</a></li>
          </ul>
        </li>
        <li><a href="https://www.myexamplewebsite99.com/kernal_category/distribution/">Distribution</a></li>
      </ul>
    </li>
  </ul>
</div>

js代码：

jQuery(document).ready(function($) {

  // Call this when you open and close a menu
  function saveSettings(openMenuClassName) {
    // Store value in localStorage
    localStorage.setItem('activeMenu', openMenuClassName)
  }

  function loadSettings() {
    // Get value from localStorage
    var activeMenu = localStorage.getItem('activeMenu');
    var menu = $("#"+activeMenu); //========> get the selected menu
        var ul =  menu.next(); //==============> Get the child UL of the selected menu
    menu.closest('li').addClass('active'); //=============> Add active class to to. Sub-headingclass is already added to all elenents in the beignning.

    if (menu) ul.slideDown('normal'); //======> slidedown the child UL of the selected Element
  }

  // Check for the saved setting on page ready
  $(document).ready(loadSettings);

  //Check if first child has sub-menu
  $('#cssmenu > ul > li:has(ul)').addClass("has-sub");

  //Behaviour
  $('#cssmenu > ul > li > a').click(function() {
    alert('here1')
    //Each time an element is click load the next DOM element into variable
    var checkElement = $(this).next();
    let currentElement = $(this).attr('id');
    console.log(checkElement);

    //Remove 'Active' from all classes and add to element clicked 
    //$('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active');

    //Check if element is UL AND if element is visible
    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {

      //TRUE - has sub-menu and is visible therefore collapse and remove active
      //$(this).closest('li').removeClass('active');
      checkElement.slideUp('normal');
    }

    //Check if element is UL AND if element is not visible
    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

      //TRUE - has sub-menu and is not visible therefore collapse open sub-menu and
      //$('#cssmenu ul ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
      saveSettings(currentElement);
    }

    if (checkElement.is('ul')) {
      return false;
    } else {
      return true;
    }
  });

  //Check if second child has sub-menu
  $('#cssmenu > ul > li > ul > li:has(ul)').addClass("has-sub");

  //Behaviour
  $('#cssmenu > ul > li > ul > li > a').click(function() {
    //Each time an element is click load the next DOM element into variable
    var checkElement = $(this).next();

    //Remove 'Active' from all classes and add to element clicked 
    $('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active');

    //Check if element is UL AND if element is visible
    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {

      //TRUE - has sub-menu and is visible therefore collapse and remove active
      $(this).closest('li').removeClass('active');
      checkElement.slideUp('normal');
    }

    //Check if element is UL AND if element is not visible
    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

      //TRUE - has sub-menu and is not visible therefore collapse open sub-menu and
      //$('#cssmenu ul ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }

    if (checkElement.is('ul')) {
      return false;
    } else {
      return true;
    }
  });
});

jQuery 折叠导航菜单的保存状态

Saving State of jQuery Collpasing Navigation Menu

treeview

jquery

local-storage