Menu - Snippet

<ul class="Menu Open">
    <li>
        <a href="javascript:;" data-title="Account">
            <span class="Title">Account</span>
        </a>
        <ul class="sub-menu First TeStInG">
            <li>
                <a href="javascript:;" data-title="Account/Dashboard">
                    <span class="Title">Dashboard</span>
                </a>
            </li>
            <li>
                <a href="javascript:;" data-title="Account/Messages">
                    <span class="Title">Messages</span>
                </a>
                <ul>
                    <li>
                        <a href="javascript:;" data-title="Account/Messages/Compose">
                            <span class="Title">Compose</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;" data-title="Account/Profile">
                    <span class="Title">Profile</span>
                </a>
                <ul>
                    <li>
                        <a href="javascript:;" data-title="Account/Profile/View">
                            <span class="Title">View</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JQuery - Snippet

$(document).ready(function() {

    "use strict";

    $(document).on('click', function(e) {
        if ($(e.target).closest($('.Menu')).length) {

            if ($(e.target).closest("a").siblings("ul").length === 0) {
                console.log('Doesn\'t have Children');
            } else {
                $(e.target).closest("a").siblings("ul").show();
            }

        }

    });

});

What I'm Trying To Achieve

Without using jQuery UI, I would like to make it so that only one menu item is visible at a time on each level.

• If the user has expanded a level multiple times then clicks on a different higher level, all within should be hidden.
• If the user clicks on a same level item which expands, all other same level should be hidden.

I've tried several ways to do this, however I keep getting tied up whereas I either make things hide which shouldn't or make it so that I cannot expand anything. I've done this previously and cannot understand why I cannot do this now.

Menu - Snippet

<ul class="Menu Open">
    <li>
        <a href="javascript:;" data-title="Account">
            <span class="Title">Account</span>
        </a>
        <ul class="sub-menu First TeStInG">
            <li>
                <a href="javascript:;" data-title="Account/Dashboard">
                    <span class="Title">Dashboard</span>
                </a>
            </li>
            <li>
                <a href="javascript:;" data-title="Account/Messages">
                    <span class="Title">Messages</span>
                </a>
                <ul>
                    <li>
                        <a href="javascript:;" data-title="Account/Messages/Compose">
                            <span class="Title">Compose</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;" data-title="Account/Profile">
                    <span class="Title">Profile</span>
                </a>
                <ul>
                    <li>
                        <a href="javascript:;" data-title="Account/Profile/View">
                            <span class="Title">View</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JQuery - Snippet

$(document).ready(function() {

    "use strict";

    $(document).on('click', function(e) {
        if ($(e.target).closest($('.Menu')).length) {

            if ($(e.target).closest("a").siblings("ul").length === 0) {
                console.log('Doesn\'t have Children');
            } else {
                $(e.target).closest("a").siblings("ul").show();
            }

        }

    });

});

What I'm Trying To Achieve

Without using jQuery UI, I would like to make it so that only one menu item is visible at a time on each level.

• If the user has expanded a level multiple times then clicks on a different higher level, all within should be hidden.
• If the user clicks on a same level item which expands, all other same level should be hidden.

I've tried several ways to do this, however I keep getting tied up whereas I either make things hide which shouldn't or make it so that I cannot expand anything. I've done this previously and cannot understand why I cannot do this now.

• javascript
• jquery

1 Answer 1

You can use find() but when you click on parent you will have to check if it is parent, so when you want to open you just want to open direct children but when you want to close you want to close all chidren.

$("ul li ul").hide()

$('li').click(function(e) {
  e.stopPropagation()
  var parent = $(this)
  $(this).find('ul').each(function() {
    if ($(this).is(':visible')) {
      $(this).hide()
    } else {
      if ($(this).parent().is(parent)) {
        $(this).show()
      }
    }
  })
  $(this).siblings().children('ul').hide()
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="Menu Open">
  <li>
    <a href="javascript:;" data-title="Account">
      <span class="Title">Account</span>
    </a>
    <ul class="sub-menu First TeStInG">
      <li>
        <a href="javascript:;" data-title="Account/Dashboard">
          <span class="Title">Dashboard</span>
        </a>
      </li>
      <li>
        <a href="javascript:;" data-title="Account/Messages">
          <span class="Title">Messages</span>
        </a>
        <ul>
          <li>
            <a href="javascript:;" data-title="Account/Messages/Compose">
              <span class="Title">Compose</span>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="javascript:;" data-title="Account/Profile">
          <span class="Title">Profile</span>
        </a>
        <ul>
          <li>
            <a href="javascript:;" data-title="Account/Profile/View">
              <span class="Title">View</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>