Comment garder menu div coulissé vers le bas, même après avoir rechargé la page, jQuery

Question

je le code HTML suivant:

<form action="" name = "myform" method = "post"> 
    <div id= "button">myButton</div> 
    <div id="submit"><input type="submit" name = "submit" value="update"></div> 
    <div class = "hiddenMenu" > 
     <div id = "checkboxes"> 
      <input type="checkbox" name="checkbox1">Checkbox1 
      <input type="checkbox" name="checkbox2">Checkbox2 
     </div> 
    </div> 
</form> 

Et code correspondant Jquery:

jQuery(document).ready(function($) 
{ 
    jQuery("#button").click(function() 
    { 
     jQuery(".hiddenMenu").slideDown(); 
    });  
}); 

Tout ce qu'il fait est lorsque l'utilisateur appuie sur "bouton" - le "hiddenMenu" avec les cases à cocher glisse vers le bas. Cela fonctionne parfaitement, mais le problème est que lorsque j'appuie sur le bouton "submit" - les rechargements de page et "hiddenMenu" disparaissent, de sorte que je dois appuyer à nouveau sur "button" pour rendre visible "hiddenMenu". Comment est-il possible d'empêcher ce menu de glisser après le rechargement? de sorte qu'une fois que vous avez appuyé sur le bouton, le menu glisse vers le bas et même après le rechargement reste visible? Je pense que c'est quelque chose à voir avec "return false", mais je ne sais pas où mettre cette déclaration. Une autre question est de savoir comment modifier jquery afin que la seule fois où ce menu glisse à nouveau est quand j'appuie à nouveau sur "bouton"?

Merci beaucoup,

Answer 1

Vous pouvez trigger le bouton événement click intérieur document d'événement prêt.

$('#button').trigger('click'); 

Sinon, vous pouvez définir le style comme

display: block; 

pour l'élément de menu.

Vous pouvez utiliser la méthode slideToggle pour faire glisser vers le haut et faire glisser le menu d'un simple clic.

jQuery(document).ready(function($) 
{ 
    jQuery("#button").click(function() 
    { 
     jQuery(".hiddenMenu").slideToggle(); 
    });  
}); 

Answer 2

En cliquant sur le bouton vous déclencher un changement d'état que vous souhaitez conserver sur une actualisation de la page (ce qui est vraiment une transition de page). Cela signifie que le serveur doit en être conscient. Donc, ce changement d'état doit être communiqué au serveur afin qu'il puisse générer la page dans l'état correct ou générer le bon Javascript pour montrer ou cacher le bon contenu.

Vous envoyez la page et souhaitez conserver le menu ouvert. La façon la plus simple de le faire est d'avoir un champ de formulaire qui communique le menu est visible. Cela est lu par le serveur et interprété pour que la réponse soit toujours visible. Donc, quelque chose comme:

<form action="" name = "myform" method = "post"> 
    <div id= "button">myButton</div> 
    <input type="checkbox" name="hiddenMenu" id="hiddenMenu"> 
    <div id="submit"><input type="submit" name = "submit" value="update"></div> 
    <div class = "hiddenMenu" > 
    <div id = "checkboxes"> 
     <input type="checkbox" name="checkbox1">Checkbox1 
     <input type="checkbox" name="checkbox2">Checkbox2 
    </div> 
    </div> 
</form> 

et

#hiddenMenu { display: none; } 

et

$(function() { 
    $("#button").click(function() { 
    var cb = $("#hiddenMenu"); 
    if (cb.is(":checked")) { 
     cb.removeAttr("checked"); 
     $("div.hiddenMenu").stop().slideUp(); 
    } else { 
     cb.attr("checked", true); 
     $("div.hiddenMenu").stop().slideDown(); 
    } 
    }); 
}); 

Maintenant, le serveur peut lire cette case à cocher et agir de façon appropriée.

Answer 3

Vous pouvez utiliser un paramètre de requête et le vérifier dans l'événement document prêt pour voir si le menu doit être en position basse. Si c'est le cas, exécutez simplement votre fonction pour la mettre en position basse.

Answer 4

Si vous utilisez PHP, vous pouvez faire quelque chose comme lorsque le formulaire est soumis:

$_SESSION['form'] = 'complete'; 

if(isset($_SESSION['form'])){ 

echo 'jQuery(".hiddenMenu").slideToggle();'; 

} 

qui va écrire dans le jquery correct mais seulement si elles ont soumis le formulaire et que vous définissez une session variable pour dire qu'ils l'ont fait.

Answer 5

Si vous avez le jQuery cookie plugin, vous pouvez utiliser ceci:

if($.cookie("menu_opened")) { 
    $(".hiddenMenu").show(); 
} 

... et le bouton aurait ce code:

$("#button").click(function() { 
    $.cookie("menu_opened", "true"); 
    $(".hiddenMenu").slideDown(); 
});