单击时在另一个元素内显示隐藏元素

Question

跟进：How to get the children of the $(this) selector?

以某种方式对我不起作用。

http://jsfiddle.net/teKwN/1/

HTML

  <h4>
    Sometext
    <h3>
      Another text
    </h3>
  </h4>

CSS

h3 {
    display: none;
}

JS

$('h4').live('click', function() {
    $(this).children('h3').toggle('slide');
});

修改： 有多个项目，如h4。 http://jsfiddle.net/teKwN/4/

请帮忙。感谢。

Answer 1

您的HTML无效，因此浏览器会尝试找出您的意思。如果你检查chrome中的元素，你会看到：

<h4>
    Sometext
</h4>
<h3>
    Another text
</h3>

因此，h4没有子女，因此$(this).children('h3')不会返回任何元素。

您需要将h3更改为其他内容，或更改您的结构和代码以反映更改。

http://jsfiddle.net/teKwN/3/

Answer 2

不确定究竟是什么问题，但嵌套标题可能不是一个好主意。使用标题重新组织HTML作为容器元素中的兄弟姐妹似乎解决了这个问题：http://jsfiddle.net/rjzaworski/sJe3g/

Answer 3

尝试

$('h3').toggle('slide');

而不是

$(this).children('h3').toggle('slide');

Answer 4

检查一下它是否正常

 $('h4').live('click', function() {
        $('h3').toggle('slow');
    });