jQuery media queries: Conditionnel fonctionner sur l'appareil (largeur de travail sur les redimensionner)

J'ai un liquide de la grille de mise en page. J'ai besoin de certaines colonnes (moins nécessaire - comme les mises à jour de Twitter) pour être "CACHÉ" sur les petites résolutions et "MONTRÉ", cliquez sur son en-tête.

Voici ce que j'ai à ce jour:

HTML

<div id="wrapper">

    <div class="toggle">
         <h2>Heading</h2>
         This content is visible always
    </div>

    <div class="toggle-small">
         <h2 class="toggle-small-heading">Heading</h2>
         <div class="toggle-small-content">
              This content is hidden on max-width 600px. You can reveal it by clicking the heading.
         </div>
    </div>

    <div class="toggle-small">
         <h2 class="toggle-small-heading">Heading</h2>
         <div class="toggle-small-content">
              This content is hidden on max-width 600px. You can reveal it by clicking the heading.
         </div>
    </div>

</div>

JQUERY

//D E F I N E   T H E   F U N C T I O N
function ToggleSmall () {
//CONDITIONALS
//Clickable heading
var ToggleSmallVar = $('#wrapper').find('.toggle-small-heading');
//Content to toggle
var ToggleSmallCol = $('#wrapper').find('.toggle-small-content');
//FUNCTION
//Content to toggle - hide it to be shown on click
$(ToggleSmallCol).addClass('none');
//Toggle function
$(ToggleSmallVar).click(function () {
//Find col to toggle
var ToggleSmallColTarget = $(this).closest('.toggle-small-section').find('.toggle-small-col'); 
//Toggle the DIV
$(ToggleSmallColTarget).slideToggle('slow');
});
}
//C A L L   T H E   F U N C T I O N
$(document).ready(function () {
if ($(window).width() < 681) {
ToggleSmall();
}
});

Il œuvres sur la charge, mais j'essaie de faire fonctionner "en tenant compte" de la fenêtre de redimensionnement: Exécuter ToggleSmall() la fonction sur des résolutions plus petites que 681 et l'arrêter sur les gros.

J'ai essayé de lier la fonction "redimensionner" de l'événement (par exemple,jQuery Media Queries sur redimensionner), mais pour une raison quelconque, le basculement" d'exécuter 3-4x fois (document est "prêt" à plusieurs reprises?).

J'ai trouvé une autre sollutions - pour définir une variable, mais aucune n'a fonctionné jusqu'à présent. Je suis aussi un jQuery novice, donc peut-être que j'ai raté quelque chose. 🙂 Des idées?

resize n'est pas un événement unique, il se déclenche autant de fois. Chaque fois qu'elle déclenche l'ajout d'un nouveau gestionnaire de clic sans annuler la précédente. Devrait avoir des instructions conditionnelles dans votre code pour voir si il a déjà été exécuté

OriginalL'auteur Petr Cibulka | 2013-02-11