Frage Menü ausblenden

[OlliK]

Hallo Leute,

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

<div id="hauptmenue">
  <nav class="profil_menue">
    <input type="checkbox"<?php
                                 if (!empty($_CheckProfil)) { ?>
               checked="checked"<?php } ?>
               id="toggle_button_profil">
    <label for="toggle_button_profil">
      <p class="amenue"><i class="bx bxs-down-arrow"></i> Profil-Menü</p>
    </label>

    <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>

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.

 

[Sempervivum]

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;
        }

 

[OlliK]

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

 

[msi]

Schöner wäre ohne Java

Ist es doch Dafür aber mit JavaScript.

 

[Sempervivum]

Ohne Javascript geht es auch, informiere dich über den Checkbox-Trick:

Formulare/Auswahllisten – SELFHTML-Wiki

wiki.selfhtml.org

Aber wie Du dort siehst, befürworten die Leute von Selfhtml das nicht.