CODEWITHSUNDEEP
jquery
user1444027
user1444027

Reputation: 5241

removeClass from all other elements except the target parent

I am attempting to build a simple dropdown menu from a simple nested list.

I'd like to do two things:

HTML should looks like this:

<ul>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
   <li><a href="#">Link</a></li>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
</ul>

jQuery looks like this:

$('html').click(function(e) {
      $('.parent-item').removeClass('open');    
      if($(e.target).parent().hasClass('parent-item')) {
         e.preventDefault();
         $(e.target).parent().toggleClass('open');
      }     
});

The removeClass line is interfering with the toggleClass line, preventing the toggleClass from triggering on second click.

Here is a fiddle

Any ideas what I am doing wrong?

Upvotes: 1

Views: 2335

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074168

I believe it can be a fair bit simpler, since you only want to do any of this if the click is within a .parent-item:

// The second argument means we only get called if the click
// travels through a .parent-item en route to the HTML element
$('html').on("click", ".parent-item", function(e) {
  // Don't follow the link
  e.preventDefault();

  // Toggle 'open' on this .parent-item
  $(this).toggleClass('open');

  // Remove it from any *other* .parent-item that has it
  $('.parent-item.open').not(this).removeClass('open');
  // Ignores this one --^^^^^^^^^^
});

Live Example:

// The second argument means we only get called if the click
// travels through a .parent-item en route to the HTML element
$('html').on("click", ".parent-item", function(e) {
  // Don't follow the link
  e.preventDefault();

  // Toggle 'open' on this .parent-item
  $(this).toggleClass('open');

  // Remove it from any *other* .parent-item that has it
  $('.parent-item.open').not(this).removeClass('open');
});
.open {
  background-color: yellow;
}
<ul>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
   <li><a href="#">Link</a></li>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

You've said in the comments that you want a click outside of any .parent-item to also close any open ones. To do that, we tweak slightly, going back to your unfiltered html click handler:

// The second argument means we only get called if the click
// travels through a .parent-item en route to the HTML element
$('html').on("click", function(e) {
  // If this click came through a parent item, get it
  var parentItem = $(e.target).closest(".parent-item");

  // Remove 'open' from any *other* .parent-item that has it
  $('.parent-item.open').not(parentItem).removeClass('open');

  // Was this click on a .parent-item?
  if (parentItem.length) {
    // Don't follow the link
    e.preventDefault();

    // Toggle 'open' on this .parent-item
    parentItem.toggleClass('open');
  }
});

Live Example:

// The second argument means we only get called if the click
// travels through a .parent-item en route to the HTML element
$('html').on("click", function(e) {
  // If this click came through a parent item, get it
  var parentItem = $(e.target).closest(".parent-item");
  
  // Remove 'open' from any *other* .parent-item that has it
  $('.parent-item.open').not(parentItem).removeClass('open');
  
  // Was this click on a .parent-item?
  if (parentItem.length) {
    // Don't follow the link
    e.preventDefault();

    // Toggle 'open' on this .parent-item
    parentItem.toggleClass('open');
  }
});
.open {
  background-color: yellow;
}
<ul>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
   <li><a href="#">Link</a></li>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You can move the remove class to bottom and exclude the current item

$('html').click(function(e) {
  var $curr;
  if ($(e.target).parent().hasClass('parent-item')) {
    e.preventDefault();
    $curr = $(e.target).parent().toggleClass('open');
  }
  $('.parent-item.open').not($curr).removeClass('open');
});
.parent-item > ul {
  display: none;
}
.parent-item.open > ul {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="parent-item">
    <a href="#">Link</a>
    <ul>
      <li><a href="#">Child</a>
      </li>
      <li><a href="#">Child</a>
      </li>
      <li><a href="#">Child</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Link</a>
  </li>
  <li class="parent-item">
    <a href="#">Link</a>
    <ul>
      <li><a href="#">Child</a>
      </li>
      <li><a href="#">Child</a>
      </li>
      <li><a href="#">Child</a>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 1

Related Questions