Question

我有一个包含以下结构的html列表：

<ul id="dunderList">
  <li>Characters</li>
<div>
   <li>scott</li>
   <li>halpert</li>
   <li>beasley</li>
   <li>schrute</li>
</div>
</ul>

我想在点击第一个ul并使用id“dunderList”时切换div，但是将其限制为仅点击该元素。现在使用我的jquery代码，即使我单击子列表，div也会切换。

JS：

$(document).on('tap', '#dunderList', function() {

    $(this).find('div').toggle();
});

所以，如果我点击'scott'，列表不应该切换，但现在就可以。

jsfiddle

Answer 1

您的HTML无效，因为nameserver 2620:0:ccc::2 nameserver 2620:0:ccd::2 nameserver 208.67.222.222 nameserver 208.67.220.220只有ul作为其子级。

您可以让点击处理程序仅定位第一个li元素，然后切换所有其兄弟元素，如

＆＃13;

li

＆＃13;

//event name is changed to click to simulate the functioning here... change it to tap in your case
$(document).on('click', '#dunderList > li:first-child', function() {
  $(this).siblings().toggle();
})

＆＃13;

Answer 2

将您的点击处理程序更改为在第一个列表元素上触发，然后找到div并切换它：

$(document).on('tap', '#dunderList > li:first-child', function(e) {
    $(this).siblings('div').toggle();
})

http://jsfiddle.net/95hk2hjz/8/

限制切换仅适用于父元素

2 个答案: