jQuery 选择 e.target 的 child

Question

我有 jQuery 代码可以在我单击列表元素时切换类。 点击列表区域没问题... 但是，当您单击具有文本“Element1”的 span 元素时，它不起作用。

1. 我只想将这个 jQuery 函数用于具有另一个元素的元素 ul 作为 child (Element1)。
2. 我不想通过单击任何子 ul 来关闭下拉菜单 元素。

$(".sidebar>ul>li").has("ul").click(
  function(e) {
    if ((e.target == this)) {
      $(this).children("ul").toggleClass("toggle");
    }
  }
);

  
.sidebar ul li ul {
  display: none;
}
.sidebar ul li ul.toggle {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="sidebar">
 <ul>
  <li>
    <span>Element1</span>
    <ul>
      <li>
        <a>Subelement1</a>
      </li>
    </ul>
  </li>
  <li>
    <span>Element2</span>
  </li>
 </ul>
</div>

Answer 1

您可以通过以下方式实现此目的:

Please note that, as @ste2425 stated in his comment, "according to the html5 spec li elements are only valid as a list item inside a ul or ol element." so you should consider wrapping the outer li elements in an ul, or ol, tag.

jsFiddle 1

var sidebarItems = $(".sidebar>li");

sidebarItems.on('click', function(e) {
  var $th = $(this),
    subList = $(this).children("ul");

  // collapse other sub-ul by removing the class "open"
  sidebarItems.not($(this)).children('ul').removeClass('open');
  
  // check if the clicked element is a child of the a sub-ul which
  // has class open, if NOT we toggle the "open" class, note that
  // we use $(e.target) to convert the target into a jQuery object
  if (!$(e.target).parents('ul').hasClass('open')) {
    subList.toggleClass('open');
  } else {
    // just for demonstration purposes
    console.log('you clicked ' + $(e.target).text());
  }
});

li { cursor: pointer; font-weight:bold; }
li ul { display: none; }
li ul.open { display: block; }
li ul.open li{ font-weight:normal; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="sidebar">
  <li>
    <span>Element 1</span>
    <ul>
      <li><a>Sub element 1.1</a></li>
      <li><a>Sub element 1.2</a></li>
    </ul>
  </li>
  <li>
    <span>Element 2</span>
    <ul>
      <li><a>Sub element 2.1</a></li>
      <li><a>Sub element 2.2</a></li>
      <li><a>Sub element 2.3</a></li>
    </ul>
  </li>
  <li>
    <span>Element 3</span>
    <ul>
      <li><a>Sub element 3.1</a></li>
      <li><a>Sub element 3.2</a></li>
    </ul>
  </li>
</div>

---

另一种方法是使用 CSS，而不是 span 元素，我们使用“invisible”复选框及其 label 元素。我们使用此 CSS 打开子 ul，它是相关复选框的兄弟:

li input[type="checkbox"]:checked ~ ul{ display: block; }

我们仍然需要 JavaScript 来“取消选中”其他复选框

jsFiddle 2

var items = $('.sidebar input[type="checkbox"]');
items.on('click', function(){
  items.not($(this)).prop('checked', false);
});

.sidebar li, li>label{ cursor: pointer; }
li>label{ font-weight:bold; }
.sidebar li ul{ display: none; }
.sidebar li input[type="checkbox"]{ display:none; }
.sidebar li input[type="checkbox"]:checked ~ ul{ display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="sidebar">
  <li>
    <input id="item1" type="checkbox">
    <label for="item1">Element 1</label>
    <ul>
      <li><a>Sub element 1.1</a></li>
      <li><a>Sub element 1.2</a></li>
    </ul>
  </li>
  <li>
    <input id="item2" type="checkbox">
    <label for="item2">Element 2</label>
    <ul>
      <li><a>Sub element 2.1</a></li>
      <li><a>Sub element 2.2</a></li>
      <li><a>Sub element 2.3</a></li>
    </ul>
  </li>
  <li>
    <input id="item3" type="checkbox">
    <label for="item3">Element 3</label>
    <ul>
      <li><a>Sub element 3.1</a></li>
      <li><a>Sub element 3.2</a></li>
    </ul>
  </li>
  <li>
    <input id="item4" type="checkbox">
    <label for="item4">Element 4</label>
  </li>
</div>