• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Problem mit jQuery toggle für ein Klapp-Menü

O

Onkelmann09

New member
Hallo

Ich bin leider kein Javascript-Experte.
Anders ausgedrückt, ich kann eigentlich kein Javascript.

Da ich aber für meine Webseite ein Klappmenü für mobile Geräte haben möchte, habe ich was entsprechendes mit jQuery ausprobiert.
Das funktioniert soweit auch erstmal gut.
Kann man sich hier anschauen:
http://spaceart.de/test2.php

Nun taucht aber noch ein Problem dabei auf.
Umd das nachzuvollziehen, macht mal genau folgendes:
* Offne http://spaceart.de/test2.php
* Da sieht man die aufgeplatte Navi auf dem groen Viewport
* Zieh das Browserfenster schmaler
* Da sieht man dann die eingeklappte Navi und den Klappen-Link auf dem kleinen Viewport
Soweit so guu!

* Dann Klapp das Menü auf ... klappt auch gut.
* Dann klapp das Menü wieder zu ... klappt auch.
* Dann zieh das Browserfenster wieder groß
* Nun bleibt die Navi leider zugekkappt
Das ist das Problem!

Jetzt könnte man fragen, wer macht denn solche Browser-Fenster-Zieh-Spielchen.
Aber wenn man die Seite auf einem Tablet öffnet, wo zwischen Hoch- und Qerformat der Media Querie Breakpoint wechselt, hat man den Salat.

Versteht Ihr, was ich meine?
Habt Ihr da eine Idee, wie man das lösen kann?

Gruß
Ingo

Hier nochmal der komplette Code dazu:
HTML: 
<!doctype html>

<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
      #panel {
        display: none;
      }
      .btn-slide {
        display: block;
      }
      @media only screen and (min-width: 46.5em) {
        #panel {
          display: block;
        }
        .btn-slide {
          display: none;
        }
      }
    </style>
  </head>
  
  <body>
      
  <script>
    $(document).ready(function(){
      $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
      });	 
    });
  </script>
   
  <a href="#" class="btn-slide">Sliden</a>

  <p id="panel">
    Kategorie 1<br>
    Kategorie 2<br>
    Kategorie 3<br>
    Kategorie 4<br>
    Kategorie 5<br>
    Kategorie 6<br>
  </p>   

  </body>
  
</html>
 
Ein eleganterer Ansatz wäre ja, wenn man mit JS nur CSS-Klassen ändert und die Klassenänderung wird nur in der Media-Query für den kleinen Bildschirm ausgewertet. Dann muss man sich aber auf CSS-Transitions verlassen oder auf die Animation verzichten.
 
Ich habe nun diese Lösung angewendet:
HTML: 
@media only screen and (min-width: 46.5em) {
#panel {
    display: block!important;
  }
.btn-slide {
    display: none;
  }
}

Ist leider nicht von mir, sondern hat mir jemand geschickt.
Funktioniert nun aber großartig!
 
Wieder was gelernt. Hatte das nicht auf dem Schirm, dass man mit !important die Inlinestyles überschreibt.
 
Dort waren aber beiden CSS-Angaben extern (in einer Datei). Hier ist das display: none im JS und das schreibt in den inline-Style.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben