12
votes

Définir un div pour afficher: Aucun; Utiliser 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 sur Afficher et masquer le menu principal en fonction de la page actuelle: < / p> xxx

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

Lorsque je masque initialement le menu, le plug-in JQuery FasteDown Menu détecte qu'il est masqué et définit la hauteur du menu sur 0PX. Lorsque je bascule le menu sur une page qui avait le menu initialement masqué, tout l'autre contenu de la vitre bascule correctement, mais le menu lui-même est coincé à une hauteur de 0.

dans mon cerveau, la réponse évidente Pour ce problème, il serait de masquer le menu contenant DIV, via JavaScript, une fois que le menu a été chargé et qu'il est défini sur la hauteur. Ce son est-il correct?

Quelqu'un pourrait-il me fournir un petit script pour faire cela? Je suis un noob complet et total avec JS. Quelqu'un d'autre a-t-il une recommandation différente de la manière de gérer ce problème?

Merci pour votre temps! Alex

mise à jour!

JS Fiddle pour le problème ici: http://jsfiddle.net/fyyg2/17/ *


15 commentaires

Pouvez-vous aussi attacher un fichier HTML?


Tout cela est très agréable, mais ne devriez-vous pas nous montrer comment vous chargez ce menu et que vous définissez sa hauteur, si nous sommes censés pouvoir vous aider avec cette partie?


@Edward - j'ai ajouté le HTML que j'utilise pour le menu


@adeneo - C'était un menu JQuery que j'ai acheté. Je n'ai pas écrit le code, alors vous en disant exactement où les fonctions de dimensionnement de la hauteur résident seront difficiles. Je peux publier tout le fichier JS si vous le souhaitez.


Sauf si a vraiment besoin de définir la hauteur à une valeur particulière pour fonctionner, une simple hauteur : auto! IMPORTANT; dans CSS pourrait "corriger" le problème ..


Si vous avez des problèmes avec quelque chose que vous avez acheté, il pourrait être plus facile de contacter votre fournisseur pour obtenir de l'aide.


@ user2246674 Le script définit le #Drilldown DIV avec une valeur CSS en ligne de "Hauteur: 0PX;", même avec "Hauteur: auto! important;" Définissez sur cette même div, le menu ne figurant toujours pas. Le script de visualisation de bascule que j'ai affiché ci-dessus est efficacement en caturant le menu. Je peux dire cela via Firebug. C'est simplement défini simplement sur une hauteur de 0px.


Est-ce que mon idée originale est une mauvaise? Puis-je simplement donner la valeur CSS de "Afficher: Aucun;", via JavaScript, une fois la page chargée de la page?


Cela semblerait que c'est. Vient d'essayer cela, et pas de chance. document.getElementyid ('cacher-moi'). Style.display = "Aucun";


hmm Vous pouvez essayer d'utiliser la visibilité: caché à la place, peut-être que cela aide?


Vous vous demandez simplement pourquoi l'un achète-t-on un menu de forage lorsqu'il y a tellement de tutoriels et de ceux libres? Par exemple. Effinroot.eiremedia.netdna-CDN .com / Repo / Plugins / Menu-Nav / ... En outre, veuillez faire un jsfiddle si vous voulez que nous soyons mieux en mesure de vous aider.


@ R3Bel Malheureusement, Visibilité: Cachée ne déclenche pas la diapositive: Basculer correctement. Sa fait juste que cela ne soit pas vu.


@Tyblitz Le menu a été acheté pour deux raisons. 1. C'était 5 dollars et 2. C'était le seul que j'ai trouvé qui a redimensionné de manière dynamique la hauteur en fonction du nombre d'éléments de menu affichés. Je n'ai jamais fait de js violon, mais je vais y aller.


@Davidthomas J'ai contacté le développeur et ils ont confirmé que le menu ne le calculera pas correctement s'il n'est pas initialement visible. Ils m'ont donné les conseils suivants: J'en ai discuté avec mon équipe ici et nous pouvons actuellement penser à 2 hacks: Utilisation de la visibilité: Hidden - De cette façon, la perturation sera en mesure de calculer sa hauteur, mais elle réservera toujours un espace dans l'utilisation de la mise en page. VISIBILITÉ: Caché + Position: Absolute avec gauche / TOP + Z: Index: 0 afin qu'il ne chevauche aucun élément


@Tyblitz Voici le jsfiddle! jsfiddle.net/fyyg2/17


5 Réponses :


15
votes

Essayez de cette façon:

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


2 commentaires

Merci pour cette pointe Kiko-LP. Malheureusement, même lorsque je cache le menu via JS après la charge de la page, le menu détecte toujours qu'il est masqué et se donne une valeur de hauteur de 0. Je ne suis pas au courant de retarder ce script afin que la hauteur du menu soit définie. première.


J'ai créé un jsfiddle pour ce problème. Vérifiez-le! jsfiddle.net/fyyg2/17



2
votes

Ajout de la valeur CSS Affichage: Aucun à votre fichier CSS fonctionne très bien. http://jsfiddle.net/dxkx6/4/

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

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


2 commentaires

L'erreur de TYPO était dans le transfert du HTML sur cette page, mais votre droite, cela fonctionne bien. La question est que la jQuery utilisée par le plugin acheté nécessite lui-même visible initialement pour pouvoir calculer correctement sa hauteur.


J'ai créé un jsfiddle pour ce problème. Vérifiez-le! jsfiddle.net/fyyg2/17



1
votes

Je ne suis pas sûr que je comprenne complètement votre problème, mais voici une pensée:

Définir l'opacité de ce que vous souhaitez cacher à 0, au lieu de changer sa taille / cacher. Ainsi, il conservera ses dimensions mais ne sera pas vu aux utilisateurs: xxx

et pour réafficher l'élément: xxx


1 commentaires

Merci pour la pensée Israël. J'essaie de basculer le menu à l'aide de la diapeToggle afin que je puisse masquer le menu sur les navigateurs mobiles. Ce qui signifie que j'ai besoin de la hauteur des dimensions pour changer avec la bascule. J'ai créé un jsfiddle pour montrer de quoi je parle ici: j'ai créé un jsfiddle pour ce problème. Vérifiez-le! jsfiddle.net/fyyg2/17



16
votes

sur DOCUMENT DOCUMENT READY FORT> DO $ ("# VÊIDIER"). Masquer (); CODE>.

Par exemple: P>

$(document).ready(function () {

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

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


3 commentaires

Pourriez-vous me montrer ce que vous entendez par cela dans mon jsfiddle? Merci .. je suis assez noob à JS / JQuery


$ (document) .Ready (fonction (fonction () {$ ("Div.drill-down-down-down-wrapper"). Masquer (); var $ foredown = $ ("# forfait"); ........ (quoi jamais votre code est)});


Parfait. Charges de menu, puis cache. Basculer les re-shows. Je vous remercie.



0
votes

Essayez:

$('#id').style = "display: none;"


0 commentaires