Javascript jQuery多重切换在下一个div中有效

我需要你在jQuery中的帮助。 当我在网页上只使用一次时，有一个运行良好的toogle脚本。但我想知道它是否在多个解决方案中起作用。链接（id=“clickme”）在包含id=“me”的下一个div中被单击为有效

详细信息

... 这里是编程。 ... 以下是文本，单击上面显示。 详细信息

... 这里是编程。 ... 以下是文本，单击上面显示。 $（文档）.ready（函数（）{ $（'#clickme'）。单击（函数（）{ $（“#我”）。制作动画({ 高度：“切换” }, 200 ); }); }); 你能帮我解决这个问题吗。 先谢谢你

---

Atti

不要使用id，而是使用class=“clickme”

$（文档）.ready（函数（）{
$（'.clickme'）。单击（函数（）{
$（这个）。下一个（“#我”）。动画({
高度：“切换”
}, 200
);
});
});

详细信息

...
这里是编程。
... 
以下是文本，单击上面显示。
详细信息

...
这里是编程。
... 
以下是文本，单击上面显示。
如果你只想玩下一个“我”，你应该这样做：

<p class="clickme" style="cursor:pointer;">Details</p>
...
Here it is programming.
... 
<div id="me" style="display: none; background-color: yellow;">
Here is the text, which appears for clicking above.
</div>

<p class="clickme" style="cursor:pointer;">Details</p>
...
Here it is programming.
... 
<div id="me" style="display: none; background-color: blue;">
Here is the text, which appears for clicking above.
</div>



<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
         $('.clickme').click(function() {
              //.next take the next DOM element
              $(this).next('#me:first').animate({
                   height: 'toggle'
                   }, 200
              );
         });
    });
</script>

详细信息

...
这里是编程。
... 
以下是文本，单击上面显示。
详细信息

...
这里是编程。
... 
以下是文本，单击上面显示。
$（文档）.ready（函数（）{
$（'.clickme'）。单击（函数（）{
//.next获取下一个DOM元素
$（这个）。下一个（“#我：第一个”）。动画({
高度：“切换”
}, 200
);
});
});

编辑：更新，请立即尝试

检查小提琴：

---

一页只有一个id！ 如果有超过2个id，则应使用类而不是id。

---

我的英语很差，我希望你能理解

现在的问题是，两个clickme只打开相同的（第一个）分区：（这是您建议修改的JSFIDLE。这里的代码根本不起作用。在网页上，只需一个div就可以了。实际上，当我单击第一个详细信息时，打开第一个和第二个详细信息之间的文本，如果单击第二个详细信息，第一个关闭，第二个打开。使用一个类，冲突class='css_style'和class='clickme'@对不起，我已经在“p”中放了两次课了tag，这解释了为什么它不起作用问题不是来自双重类。也有一个apostrof失败，但单击详细信息无法打开。你是对的，但它来自两者。我将为apostrof编辑我的意思是我剪切了双重类，但没有结果。你不需要使用文档。准备好了吗，bu您不需要添加jquery库吗

<p class="clickme" style="cursor:pointer;">Details</p>
...
Here it is programming.
... 
<div id="me" style="display: none; background-color: yellow;">
Here is the text, which appears for clicking above.
</div>

<p class="clickme" style="cursor:pointer;">Details</p>
...
Here it is programming.
... 
<div id="me" style="display: none; background-color: blue;">
Here is the text, which appears for clicking above.
</div>



<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
         $('.clickme').click(function() {
              //.next take the next DOM element
              $(this).next('#me:first').animate({
                   height: 'toggle'
                   }, 200
              );
         });
    });
</script>