Javascript jQuery切换在一个实例中工作，但不能在另一个实例中工作

一般来说，我对JS/Jquery缺乏经验，所以这可能是我缺少的一些简单的东西。我试图隐藏页面上的一些文本，然后通过切换链接启用它。这是正在使用的JS。顶部的“Attentince”可以正常工作，但“Description”不会隐藏或切换文本。我基本上是复制/粘贴了出席人员的描述，所以我不确定为什么它不起作用

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".attend_list").hide();
        $(".attend_toggle").click(function()
        {
            $(this).parent().next('.attend_list').toggle();
        });

        $(".description_text").hide();
        $(".description_toggle").click(function()
        {
           $(this).parent().next('.description_text').toggle();
        });
});
</script>

jQuery（文档）.ready（函数（$）{
$（“.attent_list”）.hide（）；
$（“.Attention_toggle”）。单击（函数（）
{
$（this）.parent（）.next（'.attent_list'）.toggle（）；
});
$（“.description_text”）.hide（）；
$（“.description_toggle”）。单击（函数（）
{
$（this）.parent（）.next（'.description_text'）.toggle（）；
});
});

这是为每个项目生成的相关HTML

出席

<div id="attending10" class="membersAttending">
    <div style="clear: both;"></div>
    <div id="membertoggle10">
        <p class="attend_toggle">
            <a href="#">Toggle Attendance</a>
        </p>
        <div style="clear: both;"></div>
    </div>
    <p class="attend_list">
        test - Yes<br />
    </p>
</div>

测试-是

描述

<div id="description10" class="description">
    <div style="clear: both;"></div>
    <div id="descriptiontoggle10">
        <p class="description_toggle">
            <a href="#">Description</a>
        </p>
        <div style="clear: both;"></div>
    </div>
    <p class="description_text">
        <p>Test</p>
    </p>
</div>

试验

问题出在HTML中，而不是jQuery中

您缺少一个

，并且在一个段落中有一个段落

<div id="attending10" class="membersAttending">
    <div style="clear: both;"></div>
    <div id="membertoggle10">
        <p class="attend_toggle">
            <a href="#">Toggle Attendance</a>
        </p>
        <div style="clear: both;"></div>
    </div>
    <p class="attend_list">
        test - Yes<br />
    </p>
</div> <!--- this was missing -->
<div id="description10" class="description">
    <div style="clear: both;"></div>
    <div id="descriptiontoggle10">
        <p class="description_toggle">
            <a href="#">Description</a>
        </p>
        <div style="clear: both;"></div>
    </div>
    <p class="description_text">
        Test <!--- this was a p in a p-->
    </p>
</div>

---

不过，如果用户第一次查看页面时要隐藏CSS，我会用CSS来隐藏它们。

你能发布一个fiddle->jsfiddle.net吗？啊，那个div实际上就在那里，只是在复制行时错过了它。似乎是这段话打破了它。然而，这些数据来自WYSIWYG编辑器，该编辑器在文本本身中包含HTML。有什么办法可以解决这个问题吗？是的，用

…

代替。谢谢，明白了。试图为一个社区修复一些相当骇客的代码，“我是附带项目的一部分。”。引出了一些有趣的事情。

jQuery(document).ready(function($) {
    $(".attend_toggle").click(function(){
        $(this).parent().next('.attend_list').toggle();
    }).click(); // trigger the bound function on load

    $(".description_toggle").click(function(){
       $(this).parent().next('.description_text').toggle();
    }).click(); // trigger the bound function on load
});