Question

可能重复：
jQuery: Find the text of a list item that contains a nested ul

<div id="pro">
<ol></ol>
<li id="4331">Region
      <ul>
         <li id="4332">Asia</li>
         <li id="6621">Europe</li>
      </ul>
</li>
</div>

如果我点击地区只显示亚洲和单击时欧洲和隐藏区域

我正在使用.hide（）方法这是我到目前为止所做的：

$(document).ready(function() {
    $("li").live("click", function(event) {
        $("li").hide(); 
        event.cancelBubble = true;
        loadChild($(this).attr("id"), event);
        return false;
    })
});

我目前的输出是：

<div id="pro">
<li id="4331" style="display: none;">
Region
   <ul>
      <li id="4332">Asia</li>
      <li id="6621">Europe</li>
   </ul>
</li>
</div>

隐藏一切......

但我想只隐藏父区域
我希望能够点击它并点击隐藏区域并仅显示亚洲和欧洲。

如果可能的话，可以在不同的div上显示，如

点击区域显示在div 1中，并在div 2上显示子项

然后也给出答案如何可能..

请帮我解决这个问题感谢。

Answer 1

您不能在不影响所有孩子的情况下将元素设置为display: none（或其同类）。就是那样子。通过将父级font-size设置为0并将子级“font-size设置为某个可见值，仍然可以在显示子级内容时隐藏”父级“内容：

http://jsfiddle.net/ExplosionPIlls/MPCEa/

event.cancelBubble = true;可以替换为e.stopPropagation()。

方法上下文中的

$("li").hide();应为$(this).hide()。否则，它将影响文档中的所有 <li>。

.live已经死了。将代码更新为至少jQuery 1.7并使用.on。

Answer 2

你无法隐藏它，但你可以通过抓取文本节点并将其删除来删除它。

$("li#4331").contents().filter(function() {
  return this.nodeType == 3;
}).remove();

http://jsfiddle.net/TLpk9/6/

Answer 3

如果您可以使用<span>标记打包“Region”，则可以更好地控制。

仅隐藏<li>值而不是其子级</li>

3 个答案: