jQuery list items and menus method/function

Question

I want to clean up my code a bit.. mechanism/algorithm like suggested in my question in another post.

list item stay open on click a link or reload/refresh page

I do not want to repeat myself over and over again. If I add more list items and menus to the code. Maybe someone can help me with a function/method to write less code.

Here is my html:

        <ul>
          <li class="menu"><a href="#">Server</a></li>
            <ul>
              <li class="item">
                <span>
                  <a href="#1">Start</a>
                </span>
              </li>
              <li class="item">
                <span>
                  <a href="#2">Security</a>
                </span>
              </li>
            </ul>
        
          <li class="menu"><a href="#">GIT</a></li>
            <ul>
              <li class="item">
                <span>
                  <a href="#1">blub</a>
                </span>
              </li>
              <li class="item">
                <span>
                  <a href="#2">wurst</a>
                </span>
              </li>
            </ul>
        </ul>

And my jQuery code:

$(document).ready(function () {
   
    $(".item").hide();

    $(".menu").click(function() {
        
        localStorage.setItem('clickedItem', '.menu');

        $(".item").hide();

        $(this, ".item").show();

    });    
});

Here is a JSFiddle: https://jsfiddle.net/ngy5mb4q/2/

I am a bit new to functions/methods, thats why I need a bit help. Maybe someone can show me an example, so that I can understand it better.

score 0 · Answer 1 · answered Aug 23 '21 at 19:09

First of all I would like to point out that this is not the correct way to create nested lists. See this proper-way-to-make-html-nested-list

Now, you can define a jQuery function say createList(arr) to create a list for you dynamically. The parameter arr is passed to the function which contains the text to be shown in the list i.e.,

arr = ["Server", "Start", "Security"]

where arr[0] can represent the list title and the rest are <li> elements of the sub-list. You can call this function at the start of your webpage loading to create the listts.

Something like this:

$(document).ready(function() {
  arr = ["Server", "Start", "Security"];
  arr1 = ["GIT", "blub", "wurst"];

  function createList(arr) {
    var n = arr.length;
    $("#masterList").append('<li class="menu"><a href="#">' + arr[0] + '</a></li>');
    if (n > 1) {
      var i = 1;
      var li = $("#masterList").append('<li style="list-style:none"></li>').children('li:last-child');
      var ul = li.append('<ul></ul>').children('ul:last-child');
      while (i < n) {
        ul.append('<li class="item"><span><a href="#1">' + arr[i] + '</a></span></li>');
        i++;
      }
    }
  }
  createList(arr);
  createList(arr1);

  $(".item").hide();

  $(".menu").click(function() {

    //localStorage.setItem('clickedItem', '.menu');

    $(".item").hide();

    $(".item").show();

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul id="masterList">
</ul>

If you want to create sub-sub-lists then you might want to think something better that this or you can still use this but might want to try some better way of passing the arr to indicate which element belongs to which level and use recursion along with it. Just an idea, pass another array named depth which has the depth mentioned of every item in the arr array. Thus add it appropriately in the DOM using jQuery. The simpler version is shown above.

jQuery list items and menus method/function

1 Answers1