Simple jQuery nested unordered list navigation for mobile click function on parent <li>

Question

I am making a nested unordered navigation list for mobile device.

I simply want to collapse the ul ul if the li.dropdown is clicked again. So only one ul ul is visible at any one time. Works OK now but not on the parent li only if another li is clicked.

Need some help with my jQuery script.

Current state example:

http://codepen.io/Kerrys7777/pen/WroGPz

jQuery

jQuery(document).ready(function($) {
  $("div.ehtm ul li:has(ul)").addClass("dropdown");
  $('div.ehtm > ul > li.dropdown > a').click(function(e) {
    e.preventDefault();

    $("div.ehtm ul li.dropdown").click(function() {
      $("li.open").removeClass("open");
      $(this).addClass('open');
    });

  });
});

HTML

<div class="ehtm">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
            <ul>
                <li><a href="#">Sub Item 2-1</a></li>
                <li><a href="#">Sub Item 2-2</a></li>
                <li><a href="#">Sub Item 2-3</a></li>
                <li><a href="#">Sub Item 2-4</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a>
                <ul>
                <li><a href="#">Sub Item 3-1</a></li>
                <li><a href="#">Sub Item 3-2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 4</a>
                <ul>
                <li><a href="#">Sub Item 4-1</a></li>
                <li><a href="#">Sub Item 4-2</a></li>
                <li><a href="#">Sub Item 4-3</a></li>
                <li><a href="#">Sub Item 2-4</a></li>
            </ul>
        </li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
    </ul>
</div>

CSS

body
{
    margin:0;
    padding:0;
    font-family:Verdana, sans-serif;
}

ul
{
    list-style:none;
    margin:0;
    padding:0;
    background:#FAFAFA; 
}

ul li
{
    border-top:1px solid #666;
}

ul li a
{
    padding:12px;
    display:block;
    color:#666;
    text-decoration:none;
}

.ehtm > ul > li.dropdown > a:after
{
    content:"";
    display:inline-block;
    position:relative;
    margin-left:8px;
    vertical-align:middle;
    width:0;
    height:0;
    border-top: 4px dashed #666;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;     
}

ul ul
{
    display:none;   
}

ul li.open ul
{
    display:block;
    background:#e3e3e3;
}

ul li.open ul li
{
    padding-left:20px;  
}

Sujata Chanda · Accepted Answer · 2015-12-29 07:05:05Z

2

Try this:-

$(document).ready(function($) {
  $("div.ehtm ul li:has(ul)").addClass("dropdown");

    $("div.ehtm ul li.dropdown").click(function() {
      if(!$(this).hasClass('open')) {
      $('li.open').removeClass('open');
    } 
 $(this).toggleClass('open');
  });
});

answered Dec 29, 2015 at 7:05

Sujata Chanda

3,3952 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gargi · Accepted Answer · 2015-12-29 07:09:12Z

1

Try this out.

Only one drop down is opened as time When we click on the arrow that drop down gets collapsed

jQuery(document).ready(function($) {
 $("div.ehtm ul li:has(ul)").addClass("dropdown");
 $('div.ehtm > ul > li.dropdown > a').click(function(e) 
    e.preventDefault();
 });
 $("div.ehtm ul li.dropdown").click(function() {
      $("li.open").not($(this)).removeClass("open");
      if($(this).hasClass('open')){
      $(this).removeClass('open'); 
  }
      else{
         $(this).addClass('open');
      }
    });
});

answered Dec 29, 2015 at 7:09

Gargi

93 bronze badges

Collectives™ on Stack Overflow

Simple jQuery nested unordered list navigation for mobile click function on parent <li>

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related