CODEWITHSUNDEEP
javascriptjqueryhtml
kawnah
kawnah

Reputation: 3404

jQuery: hasClass logic issue

I'm building a dropdown menu and checking for classes etc. I'm having an issue where a condition is false, but it's being treated as true.

With the below code snippet, follow these instructions:

  1. Click on "item 1"
  2. Click on the plus icon above "more"
  3. Click on "item 1" again

You'll notice that if you try to reopen the menu by clicking on "item 1" the menu does not open. Why? Those list items do NOT have a class of "show"... so those should open, irregardless of the second submenu, correct?

I'm not understanding what's wrong with my logic. I don't think this is a syntax error because there are no errors in console.

See below:

$(function() {
  // main expansion element
  $(".expander").click(function() {
    var subShown = $("ul > li", this).hasClass("show");
    if (!subShown) {
      $(".indented", this).slideDown('100').addClass("show");
      $(".caret", this).addClass("reversedCaret");
    } else {
      $(".indented", this).slideUp('100').removeClass("show");
      $(".caret", this).removeClass("reversedCaret");
    }
  });

  // sub expansion element
  $(".sub-expander").click(function() {
    var subSelectText = $(".more-or-less").text();
    if (subSelectText != "More") {
      $(".indented--sub").slideUp('100').removeClass("show");
      $(".sub-caret").removeClass("reversedCaret");
      $(".more-or-less").text("More");
    } else {
      $(".indented--sub").slideDown('100').addClass("show");
      $(".sub-caret").addClass("reversedCaret");
      $(".more-or-less").text("Show Less");
    }
  });

  // stop propagation on the link element within .expander class
  $(".indented").click(function(event) {
    event.stopPropagation();
  });
});
.expander:hover {
  cursor: pointer;
}

.sub-expander--indented {
  padding: 0 0 0 23px;
}

.sub-caret {
  margin-right: 75px;
}

.indented,
.indented--sub {
  display: none;
}

.show {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div class="expander">
  <span class="caret downCaret right visibleCaret">+</span>
  <ul>
    <li class="category">Item 1
      <a href="http://www.google.com"></a>
    </li>
    <li class="indented"><a href="http://www.google.com">Item 2</a></li>
    <li class="indented"><a href="http://www.google.com">Item 3</a>

      <ul class="sub-expander more" style="padding-top: 
0px;">
        <li class="indented--sub"><a href="http://www.google.com" class="moreLiAs">Chapter 5</a></li>
        <li class="indented--sub"><a href="http://www.google.com" class="moreLiAs">Chapter 6</a></li>
        <li class="indented--sub"><a href="http://www.google.com" class="moreLiAs">Chapter 7</a></li>
        <span class="sub-caret moreCaret visibleLessCaret right">+</span>
        <li class="more-or-less less sub-expander--
indented">More</li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 90

Answers (2)

Petrashka Siarhei
Petrashka Siarhei

Reputation: 732

Your code don't work because you didn't remove class show in li with class indented--sub

Upvotes: 0

Brian Wright
Brian Wright

Reputation: 877

https://jsfiddle.net/3z0zo2gn/

 } else {
  $(".indented", this).slideUp('100').removeClass("show");
  $(".caret", this).removeClass("reversedCaret");
  $(".indented--sub").slideUp('100').removeClass("show");
  $(".sub-caret").removeClass("reversedCaret");
  $(".more-or-less").text("More");
}

As stated in the above comment, you need to remove the show class from indented--sub when removing it from indented.

Upvotes: 2

Related Questions