jquery si l'instruction basée sur la taille de l'écran
J'ai un glisser hors de la barre de navigation que je voudrais ouvrir par défaut sur la largeur de l'écran de >=1024 et fermé par défaut < 1024. J'ai un bouton qui permet de l'ouvrir et fermé. Je viens juste de commencer à apprendre le js. J'imagine qu'il y a un moyen de définir une valeur par défaut bascule dans l'état dans une instruction if si la largeur de la fenêtre est >=1024. Toute aide serait grandement appréciée. Voici ce que j'ai jusqu'à présent pour la bascule.
$('a.expand').toggle(function() {
$(this).addClass("open");
$('#nav').animate({width: 50},{queue:false, duration:300});
$('.wrapify').animate({marginLeft: 50},{queue:false, duration:300});
$('.primarynav ul').hide();
$('.navlogo').hide();
}, function() {
$(this).removeClass("open");
$('#nav').animate({width: 200},{queue:false, duration:300});
$('.wrapify').animate({marginLeft: 200},{queue:false, duration:300});
$('.primarynav ul').show();
$('.navlogo').show();
});
Cela ressemble à un travail pour CSS3 Media Queries plutôt que de jQuery.
J'avais initialement CSS3 media Queries, mais encore besoin de la faire basculer pour animer ouvert et fermé. Je n'arrive pas à comprendre comment définir la valeur par défaut bascule dans l'état fermé, ce qui, je l'espère, de le faire avec jquery. Le problème que j'ai est que lorsque la requête de média coups de pied dans le panneau est techniquement toujours à l'état ouvert, de sorte que lorsque je clique sur ce la première fois qu'il essaie juste de fermer de nouveau, puis, fonctionne très bien après.
J'avais initialement CSS3 media Queries, mais encore besoin de la faire basculer pour animer ouvert et fermé. Je n'arrive pas à comprendre comment définir la valeur par défaut bascule dans l'état fermé, ce qui, je l'espère, de le faire avec jquery. Le problème que j'ai est que lorsque la requête de média coups de pied dans le panneau est techniquement toujours à l'état ouvert, de sorte que lorsque je clique sur ce la première fois qu'il essaie juste de fermer de nouveau, puis, fonctionne très bien après.
OriginalL'auteur Drhodes | 2011-09-13
Vous devez vous connecter pour publier un commentaire.
Edit:
Ou c'est peut-être ce que vous êtes après:
Cette bascule l'élément lorsque le document est prêt, si la largeur est correct.
Ajout de quelques commentaires, et des exemples pour afficher et masquer un élément avec un nom de classe "élément". Dans votre code actuel, il semble effectivement comme vous voulez quelque chose à montrer quand quelque chose est cliqué. Est-il alors, ou voulez-vous changer sur le redimensionnement de la fenêtre. Avez-vous peut-être souhaitez l'élément d'agir différemment lorsqu'il est cliqué en fonction de la taille de la fenêtre?
OriginalL'auteur demux
Il suffit de tester pour
screen.width > 1024
.https://developer.mozilla.org/en/DOM/window.screen.width
Voulez-vous changer lorsque la fenêtre est redimensionnée par l'utilisateur? Si oui, utilisez ceci:
$(window).resize(function() { if (screen.width>=1024) ... });
Je suppose que j'ai besoin de changer lorsque la taille de l'écran est de 1024, ou si elles redimensionner au-dessous de 1024. Mon principal problème est l'obtention de l'état par défaut de l'interrupteur fermé quand <1024, ouvert lorsque >1024. Je pourrais faire le reste avec css3 media queries, mais qui était jquery pour faire de l'animation et de la bascule.
CSS3 est grand, mais c'est loin d'être universelle. Ne vous fiez pas trop.
OriginalL'auteur Blazemonger
J'ai été faire un projet similaire et ce code a fonctionné pour moi..
OriginalL'auteur ArafPlays