JavaScript - Expand/Collapsing Problem bei der Verwendung mehrerer Klassen

Question

Es gibt viele ähnliche Fragen und ich habe eine Menge von ihnen angesehen, aber konnte nicht herausfinden oder finden Sie eine, die dieses Problem adressiert.

Das Problem ist, ich versuche, Ereignislistener auf eine bestimmte Klasse (Erfolg zum größten Teil) anzuwenden, und jede dieser Klassen haben ihre eigenen Elemente mit einer separaten Klasse.

group.addEventListener("click", toggle, false); 

group ist eine Klasse, die das Click-Ereignis haben.

function toggle() { 
     var contents = this.getElementsByClassName('content');  

     for (i = 0; i < contents.length; i++) { 

      if (contents[i].style.display == "block") { 
       contents[i].style.display = "none"; 
      } 
      else { 
       contents[i].style.display = "block"; 
      } 
     }  
    } 

contents ist eine andere Klasse innerhalb group verschachtelt. Es wird eine Menge contents geben, aber nur eine Handvoll group.

.addEventListener Werke verwenden, aber das click Ereignis für sie erweitert/jedes contents zusammenbricht, nicht nur die, die unter diesem bestimmten group das ist, was ich will. Ich klicke auf irgendeinen der group und alle contents auf der Seite wird erweitern/reduzieren. Wie kann ich das beheben? Das sind übrigens nur Schnipsel des Codes (es gibt viel zu posten). Ich habe versucht, den Bereich this zu verwenden, aber ich mache es nur falsch, da es sowieso die gleichen Ergebnisse produziert. Vielen Dank im Voraus.

Edit:

Mehr zu dem HTML

group.innerHTML += String.format("<div class='group' style='display: block;'>" + 
          "<h3 style='display: inline-block; color: #000; margin: 0px; padding: 0px;'>{0}</h3>" + 
          "<img src='https:\/\/my.blah.com\/_layouts\/15\/images\/ecbarw.png' style='margin: 5px;' alt='Click to expand-collapse.' />" + 
          "{1}</div>", trimmedKey, groups[key]); 

group.addEventListener("click", toggle, false); 

ich diesen Teil für einen Sharepoint-Web mit bin. Es liegt innerhalb von Display-Vorlagen, deshalb gibt es eine Menge nicht verwandten Code zum Posten, aber ich werde den entsprechenden HTML-Code für group und contents einfügen.

var content = String.format('<div class="content" style="display: none; margin: 30px 0px;"><span id="{0}" class="ms-srch-item-title">' + 
       '<h3 class="ms-srch-ellipsis">{1}</h3>' + 
      '</span>' + 
      '<span style="margin-right: 10px;"><span style="font-weight:bold;">Assigned To: </span>{2}</span>' + 
      '<span style="margin-right: 10px;"><span style="font-weight:bold;">Due Date: </span>{3}</span>' + 
      '<span style="margin-right: 10px;"><span style="font-weight:bold;">Task Status: </span>{4}</span></div>', $htmlEncode(id + Srch.U.Ids.title), titleHtml, assignedTo, dueDate, status); 

search.Grouping.push(grouping, content); 

Die content wird auf eine Funktion geschoben zu werden (hier nicht dargestellt), die sie in Gruppen sortiert. Das groups[key] ist im Grunde dasselbe wie content.

Answer 1

Ich bin nicht sicher, warum es nicht in Ihrem Fall funktioniert, aber ich habe eine einfache Demo hier für Sie vorbereitet:

// get all the elements with class 'group' 
 
var groups = document.getElementsByClassName('group'); 
 

 
// add click event listener to each group 
 
for (var i = 0; i < groups.length; i ++) 
 
    groups[i].addEventListener("click", toggle, false); 
 

 
// function to toggle group contents 
 
function toggle() { 
 
    // get all the elements within this group with class 'content' 
 
    var contents = this.getElementsByClassName('content');  
 

 
    // if the content is visible then hide it and vice-versa 
 
    for (i = 0; i < contents.length; i++) { 
 
    if (contents[i].style.display == "block") { 
 
     contents[i].style.display = "none"; 
 
    } 
 
    else { 
 
     contents[i].style.display = "block"; 
 
    } 
 
    }  
 
}

.content { 
 
    display: None; 
 
    padding-left: 10px; 
 
} 
 

 
.group { 
 
    margin-top: 10px; 
 
}

<div class="group"> 
 
Group1 
 
    <div class="content another"> 
 
    Group 1 Content 1 
 
    </div> 
 
    <div class="content another"> 
 
    Group 1 Content 2 
 
    </div> 
 
</div> 
 
<div class="group"> 
 
Group2 
 
    <div class="content another"> 
 
    Group 2 Content 1 
 
    </div> 
 
    <div class="content another"> 
 
    Group 2 Content 2 
 
    </div> 
 
</div>