Ergebnis 1 bis 3 von 3

Thema: toggle class und next() eines anderen Tags

  1. #1
    Benutzer
    Registriert seit
    31.10.2012
    Beiträge
    59

    toggle class und next() eines anderen Tags

    Hallo,
    ich möchte ein Accordeon realisieren, dass ich bereits im Netz gefunden habe: nur muss ich aber Tabellen einsetzen mit folgendem Code:
    PHP-Code:
    table.panel {
        
    width100%;
        
    displaynone;
        
    overflowhidden;
        


    <
    script type="text/javascript">
       var 
    acc document.getElementsByClassName("accordion");

        var 
    i;
             
        for (
    0acc.lengthi++) {
            
    acc[i].addEventListener("click", function() {
                
    /* Toggle between adding and removing the "active" class,
                to highlight the button that controls the panel */
                
    this.classList.toggle("activeZ-Akkordeon");
                             
                
    /* Toggle between hiding and showing the active panel */
               
    $(this).next().find('.panel').toggleClass("open");
                                        
                                              
            });
        } 

    </script>   

    //html
    <table>
    <tr class="accordion productLayer"><td colspan="5"><h4>Kantteile</h4></td></tr>
           
    <table class="panel"><tr><td> //tabelle in tabelle (panel des accordeons
       
        <tr class="product_28015">
      
      
        <td data-label="Zubehör">
      
      
                     <strong>AKR Rinneneinlaufblech aus Aluminium, Länge 2000mm</strong>
       
                            mit Rückseitenschutzlack, Farbig  
           
      
          </td>
          <td data-label="Packetumfang/Preisgebung">


          </td>
          <td data-label="Menge">
       

          </td>
         <td data-label="Preis"></td>
      
         <td data-label="Details"><a href="?id=83" target="blank">Details</a></td> 

    </tr>
    </td></tr></table>

    </table> 
    Nun liegt das Problem für die ToggleClasse den Spung von "accordeo" (this) auf class Panel zu realiseren. Hat jemand eine Idee wie man das machen könnte?

  2. #2
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.692
    Was meinst du mit Sprung realisieren? Könntest du das bitte nochmal anders formulieren?

    Ich bin ja generell ein Freund davon, dass wenn man jQuery verwendet, es auch nur mit jQuery schreibt und nicht anfängt events Klassisch zu binden.
    Das bedeutet:

    PHP-Code:
       var acc document.getElementsByClassName("accordion");

        var 
    i;
             
        for (
    0acc.lengthi++) {
            
    acc[i].addEventListener("click", function() {
                
    /* Toggle between adding and removing the "active" class,
                to highlight the button that controls the panel */
                
    this.classList.toggle("activeZ-Akkordeon");
                             
                
    /* Toggle between hiding and showing the active panel */
               
    $(this).next().find('.panel').toggleClass("open");
                                        
                                              
            });
        } 
    Kannst du auch einfach so schreiben, tut genau das selbe nur halt reines jQuery:

    PHP-Code:
    $('.accordion').click(function () {
      $(
    this)
        .
    toggleClass('activeZ-Akkordeon')
        .
    next()
        .
    find('.panel');
    }); 
    Du brauchst auch keine Schleife dafür.
    Pakete werden jetzt mit $_DHL geliefert... nicht mehr mit $_POST

  3. #3
    Benutzer
    Registriert seit
    31.10.2012
    Beiträge
    59

    So funktionierte es sehr gut

    PHP-Code:
    So funktionierte es sehr gutvielen Dank für die Hilfe!!!!
    <
    script type="text/javascript">
       $(
    '.accordion').click(function () {
      $(
    this).toggleClass('activeZ-Akkordeon');
        
      $(
    this).closest('table').next('.accPanel').toggleClass("openEq");
        
    });  

    </script> 

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •