Question

我希望页面上有多个元素，当单击标题范围时，这些元素将切换下一个内容范围的可见性。所有内容跨度内容都隐藏在文档就绪上。

内容切换在定位整个类时有效，但在尝试从单击的标题范围中定位下一个内容span元素时则无效。

当我们试图操纵通过telerik radeditor输入的文本时，正在使用特定标记

HTML

<p>
   <span class="collapsibleHeader">Content Header</span><br />
   <span class="collapsibleContent">Sed dignissim velit non congue consequat.</span>
</p>

<p>
   <span class="collapsibleHeader">Content Header</span><br />
   <span class="collapsibleContent">Sed dignissim velit non congue consequat.</span>
</p>

JQuery的

$(document).ready(function () {
$('.collapsibleContent').hide();
    $('.collapsibleHeader').click(function (e) {
        $(this).parent().next('.collapsibleContent').toggle();
        e.preventDefault();
    });
});

Answer 1

您上升到一级，p元素，然后next到下一个元素（参见下一个注释），但.collapsibleContent是p的孩子<br/>实际上是next()的{{1}}元素（因此过滤器也不匹配任何内容）。 p只返回 next 元素，然后应用过滤器以查看它是否匹配。

删除next()并使用parent()与您的选择器：

nextAll()

JSFiddle： http://jsfiddle.net/TrueBlueAussie/hn5ss2au/3/

您可以将$(document).ready(function () { $('.collapsibleContent').hide(); $('.collapsibleHeader').click(function (e) { $(this).nextAll('.collapsibleContent').toggle(); e.preventDefault(); }); $('.collapsibleContent2').hide(); $('.collapsibleHeader2').click(function (e) { $('.collapsibleContent2').toggle(); e.preventDefault(); }); });与同一过滤器一起使用，但它比siblings()慢。如果每场比赛碰巧有多个，也请添加nextAll()

e.g。

first()

注意：$(this).nextAll('.collapsibleContent').first().toggle(); 比<{1}}和nextall的替代品更快：http://jsperf.com/jquery-next-vs-siblings/5

Answer 2

下一步工作的原因是因为您正在使用parent()。

在click回调函数中，您正在调用$(this).parent()。调用回调后，$(this)将为.collapsibleHeader，因此当您致电.parent()时，它会返回p代码。

要获得.collapsibleContent，您必须拨打.children('.collapsibleContent')，而不是.next()。

您的代码如下：

$(this).parent().children('.collapsibleContent').toggle();

jsFiddle：http://jsfiddle.net/qetcd7o4/

Answer 3

访问父级然后.next（）将获得下一个段落元素而不是您的内容。在这种情况下，无需点击父级。您需要获取具有类.collapsibleContent的单击元素的兄弟节点。在点击的elem上获取下一个也不会起作用，因为从技术上来说，标题之后的下一个元素是一个中断标记。以下将做到这一点：

＆＃13;

 $('.collapsibleHeader').click(function (e) {
   e.preventDefault();
   $(this).siblings('.collapsibleContent').toggle();
 });

＆＃13;

无法找到下一个元素

3 个答案: