Menü ausblenden

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute,

Ich bekomme einen entsprechenden Menüpunkt nicht ausgeblendet. Hier der Codeschnippel:

[CODE]

checked="checked"<?php } ?> id="toggle_button_profil">

Profil-Menü

<ul>
  <li>
    <input type="checkbox"
               name="CheckUnten[]"
                                 <?php
                                 if (!empty($_CheckUnten[1])) { ?>
               checked="checked"<?php } ?>
               id="toggle_button_unten_1">
    <label for="toggle_button_unten_1">
      <p class="cmenue"><i class="bx bx-right-arrow-alt"></i> Avatar ändern</p>
     </label>
                    
     <ul>
       <li>
             /* Avatar ändern */
       </li>
     </ul>
   </li>
                
    <li>
      <input type="checkbox"
                                 name="CheckUnten[]"
                                 <?php
                                 if (!empty($_CheckUnten[2])) { ?>
                checked="checked"<?php } ?>
                id="toggle_button_unten_2">
      <label for="toggle_button_unten_2">
        <p class="cmenue"><i class="bx bx-plus"></i> eMail-Adresse ändern</p>
      </label>
                    
      <ul>
        <li>
          <input type="checkbox"
                     name="CheckSubUnten[]"
                                          <?php
                                          if (!empty($_CheckSubUnten[1])) { ?>
                     checked="checked"<?php } ?>
                     id="toggle_button_sub_1">
          <label for="toggle_button_sub_1">
            <p class="smenue"><i class="bx bx-right-arrow-alt"></i> Betreff bearbeiten</p>
           </label>
           <ul>
              <li>
                    /* Code betreff  bearbeiten */
              </li>
            </ul>
          </li>
                        
          <li class="email">
                 /* Code eMail-Adresse ändern */
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>[/CODE]

Wenn ich auf Betreff bearbeiten klick, soll der Menüpunkt eMail-Adresse ändern ausgeblendet werden (display: none).

Leider komme ich nicht weiter. Hat einer eine Lösung, danke im voraus.

Mit freundlichen Grüßen.
Olli.

2

Hallo Olli,
das lässt sich relativ leicht machen:

Gib dem Element, das verborgen werden soll, eine ID:

<li class="email" id="edit-email"> /* Code eMail-Adresse ändern */ </li>

Und lege diese bei dem Checkbutton als data-Attribut ab:

<input type="checkbox" name="CheckSubUnten[]" id="toggle_button_sub_1" data-to-hide="edit-email">

Dann kannst Du das Element mit diesem Javascript verbergen:

document.getElementById('toggle_button_sub_1').addEventListener('input', event => { const // Das Element, das verborgen werden soll, bereit stellen. // Seine ID finden wir im data-Attribut des Checkbuttons, // dessen Zustand sich geändert hat (event.target): elemToHide = document.getElementById(event.target.dataset.toHide); // Entsprechend Zustand des Checkbuttons das zugehörige Element // sichtbar oder unsichtbar mache: if (event.target.checked) { elemToHide.classList.add('hidden'); } else { elemToHide.classList.remove('hidden'); } });

Das Zeigen und Verbergen erledigt dann dieses CSS:

#edit-email.hidden { display: none; }

3

Danke für den Ansatz . Schöner wäre ohne Java .

4

Ist es doch :wink: Dafür aber mit JavaScript.

5

Ohne Javascript geht es auch, informiere dich über den Checkbox-Trick:
https://wiki.selfhtml.org/wiki/Formulare/Auswahllisten#Exkurs:_Checkbox-Hack
Aber wie Du dort siehst, befürworten die Leute von Selfhtml das nicht.