deleted 1 character in body

Source Link

edited Aug 17, 2016 at 20:01

22.4k
6
34
70

Below is some jQuery I recently wrote and I'm quite sure there is a more elegant and/or efficient way to write it. The jistgist is, when a user clicks on a Primary Nav link, it'sits Secondary menu slides down. When a user then clicks another Primary Nav link, instead of the jumpiness if the prev menu sliding up and the new one sliding down, they just toggle. This works (see below) but there must be a better way.

deleted 8 characters in body; edited title

Source Link

edited Aug 17, 2016 at 19:13

200_success

145.6k
22
191
481

There must be a more elegant/efficient way to write this jQuery ...?for revealing secondary menu

Below is some jQuery I recently wrote and I'm quite sure there is a more elegant and/or efficient way to write it. The jist is, when a user clicks on a Primary Nav link, it's Secondary menu slides down. When a user then clicks another Primary Nav link, instead of the jumpiness if the prev menu sliding up and htethe new one sliding down, they just toggle. This works (see below) but there must be a better way. Thanks!

p.s. I'm a total newbie so I apologize if I'm not following convention .. .please school me if so :)

Source Link

asked Aug 17, 2016 at 19:03

DuaneP

43
3

There must be a more elegant/efficient way to write this jQuery ...?

Below is some jQuery I recently wrote and I'm quite sure there is a more elegant and/or efficient way to write it. The jist is, when a user clicks on a Primary Nav link, it's Secondary menu slides down. When a user then clicks another Primary Nav link, instead of the jumpiness if the prev menu sliding up and hte new one sliding down, they just toggle. This works (see below) but there must be a better way. Thanks!

p.s. I'm a total newbie so I apologize if I'm not following convention .. .please school me if so :)

The code in question:

 if ($(this).attr('class') == 'primary-item-a') {
var siblingOpen = 0;
$parent_li.siblings().find('ul').each(function(index) {
  if ($(this).css('display') == 'block') {
    siblingOpen++;
  }
  return siblingOpen;
});

if (siblingOpen >= 1) {
  $parent_li.children('ul').toggle();
} else {
  $parent_li.children('ul').slideToggle('fast');
}

} else {
    $parent_li.children('ul').slideToggle('fast');
  }

All of the HTML/CSS/jQuery in a Stack Snippet:

function closeTertiaryMenus() {
  $('ul.tertiary').each(function(index) {
    if ($(this).css('display') == 'block') {
      $(this).hide();
    }
  });
}

function removeSecActBtnClr() {
  $('nav li.secondary-item > a').each(function(index) {
    $(this).removeClass();
  });
}

$('nav li.primary-item > a').click(function() {
  closeTertiaryMenus();
  removeSecActBtnClr();
});
///////////////  THE CODE IN QUESTION  ///////////////
$('nav a').click(function() {
  $parent_li = $(this).parent('li');
  // ************** ALTHOUGH MAINLY THIS CODE **************   
  if ($(this).attr('class') == 'primary-item-a') {
    var siblingOpen = 0;
    $parent_li.siblings().find('ul').each(function(index) {
      if ($(this).css('display') == 'block') {
        siblingOpen++;
      }
      return siblingOpen;
    });

    if (siblingOpen >= 1) {
      $parent_li.children('ul').toggle();
    } else {
      $parent_li.children('ul').slideToggle('fast');
    }

  } else {
    $parent_li.children('ul').slideToggle('fast');
  }
  //***************************************
  // Hide the active menus of siblings 
  $parent_li.siblings().find('ul').hide();
});
////////////////////////////////////////////

 body,
        nav,
        ul,
        li,
        a {
          margin: 0;
          padding: 0;
        }

        a {
          text-decoration: none;
          color: #fff;
        }

        nav {
          background: #005838;
        }

        ul {
          list-style: none;
        }

        ul.primary,
        ul.secondary {
          padding: 0 10px;
        }

        nav ul.primary {
          position: relative;
        }

        li.primary-item,
        li.secondary-item {
          display: inline;
        }

        nav a {
          display: inline-block;
          text-transform: uppercase;
          color: #fff;
          font-weight: bold;
          padding: 0.75rem;
          margin: 0.5rem 0;
          font-size: 1.125rem;
        }

        nav ul li.primary-item > a:hover {
          text-decoration: none;
          background-color: #008050;
        }

        nav li.primary-item > a.btn-active {
          background-color: #008050;
        }

        nav ul li.secondary-item > a:hover {
          text-decoration: none;
          background-color: #9dcb6b;
        }

        nav li.secondary-item > a.btn-active {
          background-color: #9dcb6b;
        }

        nav ul li.tertiary-item > a {
          display: block;
        }

        nav ul li.tertiary-item > a:hover {
          text-decoration: none;
          background-color: #769950;
        }

        nav ul.secondary {
          display: none;
          position: absolute;
          left: 0;
          width: 100%;
          background: #008050;
        }

        nav ul.secondary li.secondary-item a {
          padding: 0.3rem 0.75rem;
          ;
        }

        nav ul.tertiary {
          display: none;
          position: absolute;
          z-index: 9999;
          background: #9dcb6b;
        }

        nav ul.tertiary li.tertiary-item {
          border-bottom: 1px solid #7EA356;
        }

        nav ul.tertiary li.tertiary-item a {
          padding: 0.75rem;
          margin: 0;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<nav>
  <ul class="primary">
    <li class="primary-item">
      <a class="primary-item-a" href="#">Primary 1</a>
      <ul class="secondary">
        <li class="secondary-item"><a href="#">P1 - Secondary 1</a>
          <ul class="tertiary">
            <li class="tertiary-item"><a href="#">P1 - S1 - Tertiary 1</a></li>
            <li class="tertiary-item"><a href="#">P1 - S1 - Tertiary 2</a></li>
          </ul>
        </li>
        <li class="secondary-item"><a href="#">P1 - Secondary 2</a>
          <ul class="tertiary">
            <li class="tertiary-item"><a href="#">P1 - S2 - Tertiary 1</a></li>
            <li class="tertiary-item"><a href="#">P1 - S2 - Tertiary 2</a></li>
          </ul>
        </li>
        <li class="secondary-item"><a href="#">P1 - Secondary 3</a>
          <ul class="tertiary">
            <li class="tertiary-item"><a href="#">P1 - S3 - Tertiary 1</a></li>
            <li class="tertiary-item"><a href="#">P1 - S3 - Tertiary 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="primary-item">
      <a class="primary-item-a" href="#">Primary 2</a>
      <ul class="secondary">
        <li class="secondary-item"><a href="#">P2 - Secondary 1</a>
          <ul class="tertiary">
            <li class="tertiary-item"><a href="#">P2 - S1 - Tertiary 1</a></li>
            <li class="tertiary-item"><a href="#">P2 - S1 - Tertiary 2</a></li>
          </ul>
        </li>
        <li class="secondary-item"><a href="#">P2 - Secondary 2</a>
          <ul class="tertiary">
            <li class="tertiary-item"><a href="#">P2 - S2 - Tertiary 1</a></li>
            <li class="tertiary-item"><a href="#">P2 - S2 - Tertiary 2</a></li>
          </ul>
        </li>
        <li class="secondary-item"><a href="#">P2 - Secondary 3</a>
          <ul class="tertiary">
            <li class="tertiary-item"><a href="#">P2 - S3 - Tertiary 1</a></li>
            <li class="tertiary-item"><a href="#">P2 - S3 - Tertiary 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

javascript jquery

Stack Exchange Network

Return to Question

There must be a more elegant/efficient way to write this jQuery ...?for revealing secondary menu

There must be a more elegant/efficient way to write this jQuery ...?

jQuery for revealing secondary menu

There must be a more elegant/efficient way to write this jQuery ...?