Question

我正在建立一个下拉菜单并检查课程等。我遇到的问题是条件是错误的，但它被视为真实。

使用以下代码段，请按照以下说明操作：

点击"item 1"
点击"more"
点击"item 1＆＃34;再次

您会注意到，如果您尝试通过点击"item 1"重新打开菜单，则菜单无法打开。为什么？那些列表项没有"show"类...所以那些应该打开，不管第二个子菜单，是否正确？

我不明白我的逻辑有什么问题。我不认为这是语法错误，因为控制台中没有错误。

见下文：

＆＃13;

$(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();
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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");
}

如上面的注释中所述，当从缩进中删除时，您需要从indented - sub中删除show类。

Answer 2

您的代码无效，因为您没有删除类show中的课程indented--sub

jQuery：hasClass逻辑问题

2 个答案: