web-dev-qa-db-fra.com

Définition d'un div à afficher: aucun; en utilisant javascript ou jQuery

J'ai une question très rapide qui devrait être une réponse facile.

J'ai un menu de navigation mobile qui utilise jQuery pour "explorer" les niveaux de menu. Chaque fois qu'un niveau est chargé, la jQuery détermine la hauteur du menu et la définit en conséquence.

J'utilise le script suivant sur un bouton pour basculer entre afficher et masquer le menu principal basé sur la page actuelle:

<script type="text/javascript">
    (function ($) {
        $("a.BNnavTrigger").click(function (event) {
            event.preventDefault();
            $("div.drill-down-wrapper").slideToggle("9000");
        });
    })(jQuery);     
</script>

Pour que le menu démarre "fermé" sur certaines pages, je sais que je dois donner la valeur CSS de display:none; à la div contenant. Tout fonctionne bien avec un petit problème.

Lorsque je masque initialement le menu, le plug-in de menu déroulant jQuery détecte qu'il est masqué et définit la hauteur du menu sur 0px. Lorsque je bascule le menu sur une page dont le menu était initialement masqué, tout le contenu du volet bascule correctement, mais le menu lui-même est bloqué à une hauteur de 0.

Dans mon cerveau, la réponse évidente à ce problème serait de masquer le div contenant le menu, via javascript, une fois le menu chargé et sa hauteur définie. Est-ce que cela semble correct?

Quelqu'un pourrait-il me fournir un petit script pour le faire? Je suis un noob complet et absolu avec js. Quelqu'un d'autre a-t-il une recommandation différente sur la façon de gérer ce problème?

Merci pour votre temps! Alex

MISE À JOUR!

JS fiddle for the issue here: http://jsfiddle.net/fyyG2/17/ *

javascriptjquerycssmobile
12
Alex Ritter

Activé document prêt faire $("#yourId").hide();.

Par exemple:

$(document).ready(function () {

     $("div.drill-down-wrapper").hide();
     var $drillDown = $("#drilldown");

        // (what ever your code is)
 });
16
Ani

Essayez de cette façon:

$("#yourId").css("display","none");

ça devrait marcher!

J'espère que ça aide.

15
Kiko Mesquita

Ajout de l'affichage de la valeur CSS: aucun dans votre fichier CSS ne fonctionne très bien. http://jsfiddle.net/dxkX6/4/

mais je peux voir que vous avez une faute de frappe dans votre fichier html:

$("a.BNnavTrigger").click(function (event) {
       ^

<a class="BNavTrigger">Toggle Menu</a>
        ^

est-ce peut-être la raison pour laquelle vous rencontrez le problème?

2
Edward

Je ne suis pas sûr d'avoir bien compris votre problème, mais voici une pensée:

Définissez l'opacité de ce que vous souhaitez masquer à 0, au lieu de changer sa taille/de le masquer. De cette façon, il conservera ses dimensions mais ne sera pas visible pour les utilisateurs:

$('#id').css('opacity',0);

Et pour re-montrer l'élément:

$('#id').css('opacity',1);
1
Israel