Wie verstecke ich bestimmte Divs, indem ich auf eine Schaltfläche klicke?-Fragen und Antworten zum chinesischen PHP-Netzwerk

Ich suche nach einer Möglichkeit, eine bestimmte Anzahl von Divs auszublenden, indem ich das Button-OnClick-Ereignis verwende.

Ich weiß, dass es etwas mit .toggleClass('.AddCSSClassHere') zu tun haben könnte, aber ich bin mir nicht wirklich sicher ... Ich kann ein Div ein-/ausblenden, aber nicht eine in der übergeordneten Div-spezifischen Div. jquery stammt aus einem Codeausschnitt, den ich früher verwenden wollte. Alle Divs mit der hidethis-Klasse „“ müssen angezeigt oder ausgeblendet werden, wenn Sie auf die Schaltfläche „Spalten anzeigen“ klicken

$('button').click(function() { $(this).siblings('div').toggleClass('hidethis '); });

* { Rand: 0; Polsterung: 0; } html, Körper { Höhe: 100 %; } Körper { Hintergrund: #fff; Polsterung: 0; Rand: 0; Schriftfamilie: Myriad-Pro, Arial, „Varela Round“, serifenlos; Schriftgröße: 16px; } .Zitat { Höhe: 100 %; Überlauf: automatisch; } .main-div { Position: klebrig; oben: 0; } .header-div { Anzeige: Flex; Polsterung: 5px 0; Hintergrundfarbe: #fff; } .titles { Anzeige: Flex; Breite: 100 %; align-items: center; } .currencyinfo { Breite: fit-content; maximale Breite: 100 Pixel; Mindestbreite: 100 Pixel; Textausrichtung: Mitte; Polsterung: 0; } .die Info { Breite: fit-content; maximale Breite: 100 Pixel; Mindestbreite: 100 Pixel; Textausrichtung: Mitte; Polsterung: 10px 0; } .Währung { maximale Breite: 70 Pixel; Mindestbreite: 70 Pixel; } .table-info { Anzeige: Flex; Flexrichtung: Reihe; Flex-Wrap: wickeln; Breite: 100 %; overflow-y: scrollen; } .main-div-info { Anzeige: Flex; Textausrichtung: Mitte; Flexrichtung: Reihe; Flex-Wrap: wickeln; Breite: 100 %; } .div-info { Anzeige: Flex; Flexrichtung: Reihe; Flex-Wrap: wickeln; Breite: 100 %; Polsterung: 10px 0; align-items: center; } .hidethis { Anzeige: keine; }

       
 
 
 
 Local
 
 
 
 
 
 
    Produktname
 ID
 Menge
 Zeiträume
  
 Stückpreis
 Stückkosten
 Einheitsrabatt
 
 
 
     ;Vollgas
  
 1.0
 1.0
 USD
 37,50
 0.0
 0.0

$(function() { const elsToToggle = $('.hidethis'); $('.show-this-data').click(function() { $(this).parent().siblings('div').toggleClass('hidethis '); }); $('.show-all-data').click(function() { elsToToggle.toggleClass('hidethis'); }); });

* { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #fff; padding: 0; margin: 0; font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif; font-size: 16px; } .quotation { height: 100%; overflow: auto; } .main-div { position: sticky; top: 0; } .header-div { display: flex; padding: 5px 0; background-color: #fff; } .titles { display: flex; width: 100%; align-items: center; } .currencyinfo { width: fit-content; max-width: 100px; min-width: 100px; text-align: center; padding: 0; } .info { width: fit-content; max-width: 100px; min-width: 100px; text-align: center; padding: 10px 0; } .currency { max-width: 70px; min-width: 70px; } .table-info { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; overflow-y: scroll; } .main-div-info { display: flex; text-align: center; flex-direction: row; flex-wrap: wrap; width: 100%; } .div-info { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; padding: 10px 0; align-items: center; } .hidethis { display: none; }