Question

我有jQuery代码，当我点击列表元素时切换类。 如果你点击列表区就可以了...... 但是当你单击span元素时，它有文本“Element1”，它不起作用。

我想要将此jQuery函数仅用于具有另一个的元素作为孩子的ul（ Element1 ）。
我不想通过点击任何子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

以下是您可以实现此目标的方法：

请注意，正如 @ ste2425 在评论中所述，＆＃34; according to the html5 spec li elements are only valid as a list item inside a ul or ol element. ＆＃34;所以你应该考虑在 li 或 ul 标签中包装外部 ol 元素

jsFiddle 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

另一种方法是使用CSS，而不是我们使用的span元素＆＃34; 不可见＆＃34;带有label元素的复选框。我们使用这个CSS来打开子ul，它是相对复选框的兄弟：

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

我们仍然需要JavaScript，以便取消选中＆＃34;其他复选框

jsFiddle 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用currentTarget事件代替e.target来获取所点击的ul的父span个元素。并使用stopPropagation()来阻止事件冒泡DOM树。

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

jQuery选择e.target

2 个答案: