Question

我用复选框构建了一个树菜单。然后我使用Jquery使项目可以隐藏。

$(function() {
  $("li:has(ul)").click(function(e) {
    if (this == e.target) {
      if ($(this).children().is(":hidden")) {
        $(this).css("list-style-image", "url(http://www.matrox.com/graphics/media/image/style/list_minus.gif)").children().show();
      } else {
        $(this).css("list-style-image", "url(http://www.matrox.com/graphics/media/image/style/list_plus.gif)").children().hide();
      }
    }
    return false;
  }).css("cursor", "pointer").click();

  $("li:not(:has(ul))").css({
    "cursor": "default",
    "list-style-image": "none"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="TreeMenu">
  <div class="section">
    <h1>Item1</h1>
    <ul>
      <li><input type="checkbox" role="checkbox" id="test1" />detail1</li>
      <li><input type="checkbox" role="checkbox" id="test2" aria-checked="mixed" aria-controls="test3" onclick="this.checked=!this.checked" />detail2
        <ul>
          <li><input type="checkbox" role="checkbox" id="test3" aria-checked="true" onclick="this.checked=!this.checked" />detail2.2</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

可以选中“ test1”复选框，但是单击时“ test2”和“ test3”没有反应。如何解决问题？

Answer 1

您的代码中有两件事是不对的。在html上，为什么要使用onclick="this.checked=!this.checked"，您可以删除它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="TreeMenu">
  <div class="section">
    <h1>Item1</h1>
    <ul>
      <li><input type="checkbox" role="checkbox" id="test1" />detail1</li>
      <li><input type="checkbox" role="checkbox" id="test2" aria-checked="mixed" aria-controls="test3" />detail2
        <ul>
          <li><input type="checkbox" role="checkbox" id="test3" aria-checked="true" />detail2.2</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

另一个在脚本上。您总是在所有li元素上以及复选框内都返回false。您不必将false设为false，因为li没有默认操作，但是如果要保留，则必须放入if (this == e.target)

$("li:has(ul)").click(function(e) {
    if (this == e.target) {
      if ($(this).children().is(":hidden")) {
        $(this).css("list-style-image", "url(http://www.matrox.com/graphics/media/image/style/list_minus.gif)").children().show();
      } else {
        $(this).css("list-style-image", "url(http://www.matrox.com/graphics/media/image/style/list_plus.gif)").children().hide();
      }
    return false;
    }

  }).css("cursor", "pointer").click();

Answer 2

您不需要在复选框输入中添加onclick事件。
无法检查Detail2和detail2.2，因为在触发点击时返回false。

$(function() {
  $("li:has(ul)").click(function(e) {
    if (this == e.target) {
      if ($(this).children().is(":hidden")) {
        $(this).css("list-style-image", "url(http://www.matrox.com/graphics/media/image/style/list_minus.gif)").children().show();
      } else {
        $(this).css("list-style-image", "url(http://www.matrox.com/graphics/media/image/style/list_plus.gif)").children().hide();
      }
    }
   // return false;
  }).css("cursor", "pointer").click();

  $("li:not(:has(ul))").css({
    "cursor": "default",
    "list-style-image": "none"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="TreeMenu">
  <div class="section">
    <h1>Item1</h1>
    <ul>
      <li><input type="checkbox" role="checkbox" id="test1" />detail1</li>
      <li><input type="checkbox" role="checkbox" id="test2" aria-checked="mixed" aria-controls="test3" />detail2
        <ul>
          <li><input type="checkbox" role="checkbox" id="test3" aria-checked="true" />detail2.2</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 3

对于元素click，您有两个$("li:has(ul)")事件。仅保留一个单击监听器。

同样，您在return false回调函数中使用click，这将阻止选中该复选框。

$(function() {
  $("li:has(ul)").click(function(e) {
    if (this == e.target) {
      if ($(this).children().is(":hidden")) {
        $(this).css("list-style-image", "url(http://www.matrox.com/graphics/media/image/style/list_minus.gif)").children().show();
      } else {
        $(this).css("list-style-image", "url(http://www.matrox.com/graphics/media/image/style/list_plus.gif)").children().hide();
      }
    }
    //   return false;
  }).css("cursor", "pointer").click();

  $("li:not(:has(ul))").css({
    "cursor": "default",
    "list-style-image": "none"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="TreeMenu">
  <div class="section">
    <h1>Item1</h1>
    <ul>
      <li><input type="checkbox" role="checkbox" id="test1" />detail1</li>
      <li><input type="checkbox" role="checkbox" id="test2" aria-checked="mixed" aria-controls="test3" />detail2
        <ul>
          <li><input type="checkbox" role="checkbox" id="test3" aria-checked="true" />detail2.2</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

无法选中我的树菜单中的复选框

3 个答案: