jQuery - 仅切换下一个元素

Question

我想用 jQuery 仅切换下一个元素(而不是其他元素):我将用示例来解释自己。

这是 HTML:

<article id="post-60" class="post-60 page type-page status-publish hentry">
    <header class="entry-header">
        <h1 class="entry-title">Pagine Critiche</h1>
    </header><!-- .entry-header -->

    <div class="entry-content">
        <p><strong>TITLE 1.1</strong></p>
        <p><strong>TITLE 1.2</strong></p>
        <p><em>Writer writes:</em></p>
        <p>Article #1</p>
        <p>&nbsp;</p>

        <p><strong>TITLE 2.1</strong></p>
        <p><strong>TITLE 2.2</strong></p>
        <p><em>Writer writes:</em></p>
        <p>Article #2.1</p>
        <p>Article #2.2</p>
        <p>Article #2.3</p>
    </div>
</article>

我想单击 TITLE 1.1 并显示(切换)TITLE 1 和 TITLE 2 之间的所有内容(因此第一个“strong p”和第二个“strong p”之间的所有内容)；简而言之:我只想切换引用该标题的文章。

我尝试编写这个脚本:

$(document).ready(function(){
    $("#post-60 p strong").click(function(){
        $("p:not(:has(strong))").toggle(500);
    });
});

但它同时切换所有“正常”段落；这是fiddle .
我相信我需要 next() 选择器，但我没有以正确的方式使用它，就像我尝试过的那样:

$(document).ready(function(){
    $("#post-60 p strong").click(function(){
        $("p:not(:has(strong))").next().toggle(500);
    });
});

但它也不起作用。

我想解决这个问题，而无需编辑 HTML 标记。

Answer 1

如果您无法更新标记，请应用此 JS。

$(document).ready(function(){
    $("#post-60 p strong").click(function(){
        $(this).parent().next('p').nextUntil( "p:has(strong)").toggle(500);
    });
});

工作 fiddle https://jsfiddle.net/xpxhkh1r/3/

如果您可以重写标记，事情会简单得多。这是一个示例。

<div class="entry-content">
    <p><strong>TITLE 1.1</strong></p>
    <div class="item">
        <p><strong>TITLE 1.2</strong></p>
        <p><em>Writer writes:</em></p>
        <p>Article #1</p>
        <p>&nbsp;</p>
    </div>

    <p><strong>TITLE 2.1</strong></p>
    <div class="item">
        <p><strong>TITLE 2.2</strong></p>
        <p><em>Writer writes:</em></p>
        <p>Article #2.1</p>
        <p>Article #2.2</p>
        <p>Article #2.3</p>
    </div>
</div>

JS 应该看起来像

$(document).ready(function(){
    $("#post-60 p strong").click(function(){
        $(this).parent().next('.item').toggle(500);
    });
});

查看更新的 fiddle https://jsfiddle.net/xpxhkh1r/1/