当同一类中有多个div时，将javaScript函数应用于1个div

我试图制作一个简单的时间线，通知用户。当他们点击某个日期时，应该会有某种“手风琴”系统，可以下拉并提供更多信息。当他们再次点击时，“手风琴”再次关闭

为了更清楚一些，我加入了一些图片：

以及：

第一张图片显示用户进入页面时看到的内容，第二张图片显示用户单击其中一个元素时看到的内容

ive目前的问题是，当他点击1天时，所有信息都会显示出来。我不知道怎样才能得到某种索引，所以只有那一天才能显示隐藏的信息

目前，我有以下代码：

JavaScript

        $counter=1;
        $(document).ready(function(){
          $(".tijdlineElement").click(function(){

            $(".tijdlineElementHidden").slideToggle("slow");

            if($counter == 1){
            getElementsByClassName("tijdlineElementHidden").style.display = "block";
            $counter = 2
            }
            else{
         getElementByClass("tijdlineElementHidden").style.display = "none";

            $counter =1
            }
          });
        });

和PHP，以使1天：

    echo "<div class='tijdlineElement'>";
echo "<div class='tijdlineP2Element' >" . $topic['Uur']."<br /><br />" . $topic['Beschrijving'] . "</div>";

echo "<div class='tijdlinePElement'>". $newDate . '<br />'. $newDate1 . ' '. $newDate1a . '<br />' . $newDate2 ."</div>";
echo "<img src='images/meerFase1.png'/>";


echo "</div>";
echo "<div class='tijdlineElementHidden' style='display:none;'>";
echo "<div class='tijdlineP2Element'>" . $topic['LangeBeschrijving'] . "</div>";
echo "<div class='tijdlinePElement'></div>";
echo "</div><br />";

echo”“；
“回声”$主题['Uur']。“

”$主题['Beschrijving']。"";
“回声”$新日期。”
$新日期1$新日期1a。”
$新日期2。”；
回声“；
回声“；
回声“；
“回声”$主题['LangeBeschrijving']。"";
回声“；
回声“
”；

问题是，当用户单击某个日期时，其他日期的所有信息也会显示出来

因此，我的问题是：如何访问该特定div，以便只显示所选（单击的div）div中的信息？尝试以下操作：

var parent = $( this );
$( ".tijdlineElementHidden", parent ).slideToggle("slow");

---

它应该只切换作为已单击元素子元素的“tijdlineElementHidden”div。

使用

$（“.tijdlineElement”）。单击（function（）{}

您将在该类的所有元素上触发click事件。您可以使用类似

.each（）

和

$（此）

将其范围限定到当前单击的元素

$(".tijdlineElement").each(function(){
   $(this).on({
       click:function()
       {
           $(this).slideToggle("slow");
           // other click function stuff
       }
   });
});

快速演示：

更新的演示：

---

循环遍历共享相同类名的所有元素，然后

addEventListener

或

attachEvent

如果IE8（本机JS解决方案）

var-elements=document.querySelectorAll（“.tijdlineElement”）；
变量i=0，长度=elements.length；
对于（i；i

不要引用类，而是使用$（this）引用它：

 $(".tijdlineElement").click(function(){

   $(this).find(".tijdlineElementHidden").slideToggle("slow");
   .....the rest of the code...
 }

---

我无法理解为什么在jQuery旁边使用

GetElementsByCassName

。与其每次都引用类，不如使用$（this），因此$（“.tijdlineElementHidden”）。slideToggle（“slow”）；变成$（this）。slideToggle（“slow”）例如，当我更改某些内容（如向.tijdlineElement添加边框）时，它会起作用，但使用slidetoggle时，效果正好相反。它会删除我的日期，而不是显示其他文本。当我将其更改为-$（'.tijdlineElementHidden'）。slidetoggle（“慢速”）；-所有元素都会再次显示。我注意到，如果我打开并关闭第一个元素，并且我想看到第二个元素中隐藏的文本，那么第一个元素会再次显示他的文本。有什么方法可以解决这个问题吗？如果没有，我将使用向下滑动的方式，以便在用户单击时始终显示文本。解决了这个问题。我a添加.removeClass.Ty以获取帮助

 $(".tijdlineElement").click(function(){

   $(this).find(".tijdlineElementHidden").slideToggle("slow");
   .....the rest of the code...
 }