Nur Anzeige ein - /Ausblenden " - Taste, wenn auf dem Handy/Tablet

Habe ich Folgendes Demo: http://jsfiddle.net/NCj2u/

Derzeit funktioniert es auf alle Plattformen, aber ich würde es bevorzugen, wenn die Schaltfläche anzeigen & hidden content funktioniert nur im Tablet & Handy. Desktop zeigen würde, werden die Inhalte automatisch und verstecken Sie die-Taste.

Kann mir jemand erklären, wie ich dies tun? Würde ich media-queries oder tun dies in meinem Javascript?

Meine jQuery:

$(document).ready(function() {
  $('.nav-toggle').click(function(){
    //get collapse content selector
    var collapse_content_selector = $(this).attr('href');                   

    //make the collapse content to be shown or hide
    var toggle_switch = $(this);
    $(collapse_content_selector).toggle(function(){
      if($(this).css('display')=='none'){
                        //change the button label to be 'Show'
        toggle_switch.html('Show');
      }else{
                        //change the button label to be 'Hide'
        toggle_switch.html('Hide');
      }
    });
  });

});

Danke.

  • stackoverflow.com/questions/3514784/... - Starten Sie hier
  • Können Sie fügen Sie eine kleine Klasse auf der obersten Ebene durch die Ermittlung des user-agent im backend. sagen Sie zum Beispiel <body class="mobile">. Wenn Sie dann die Lösung ist ziemlich einfach. Sie können $('body.mobile .nav-toggle') statt $('.nav-toggle')
  • Könnten Sie $.browser aber bewusst sein, dass seine schon veraltet in den neueren Versionen
InformationsquelleAutor michaelmcgurk | 2013-07-09
  1. 4

    Hmmm es gibt nur wenige Optionen, die Sie könnten versuchen . Ich persönlich empfehle gegen browser-Erkennung, es sei denn, Sie wollen gezielt nur ein browser, dass Ihre Umsetzung. Für Ihre Anforderung, warum nicht versuchen, die media queries?

     .nav-toggle{
   display : none; //display none for everyone
 }

/* Landscape phone to portrait tablet  show the button */
@media (max-width: 767px) {

 .nav-toggle{
   display : block; //or inline-block or inline : which ever is appropriate for you.
 }

    }

    InformationsquelleAutor Kiran Ruth R
  2. 2

    Mit diesen Skripten können Sie erkennen, alle mobilen browser

    http://detectmobilebrowsers.com/

    Ich denke, die kürzeste Lösung zu Fragen, für mobil-Browser und wenn der Benutzer nicht mit einer Ausführung der click() Funktion der Schaltfläche

    InformationsquelleAutor Fabian N.
Schreibe einen Kommentar