Faire des DIV visible sur LI cliquez sur

J'ai un div id "superposition" que je veux rendre visible lorsque l'utilisateur clique sur le li qui l'enferme.

Le code HTML:

<ul>
    <li class="album" id="nirvana-nevermind">
         <div id="overlay">
              <a href="http://www.nirvana.com">Nirvana</a> Nevermind
         </div>
    </li>
</ul>

Le CSS:

#overlay { visibility: hidden; }

Le javascript:

$(document).ready(function(){

$(".album").click(function() {
    //need the following to toggle
    $("#overlay").css("visibility", "visible");    
});

$("#overlay").click(function() {
    window.location=$(this).find("a").attr("href");
    return false;
});

});

Mise à jour: Le code fonctionne maintenant. J'ai modifié le code pour ce que je suis en utilisant. La DIV#incrustation s'affiche lorsque la LI.l'album est cliqué, cependant, j'ai plus d'une de ces LI.les albums les uns à côté des autres et de n'importe qui LI est cliqué, la #superposition montre seulement sur la première LI. Une idée de comment résoudre ce problème?

  • Veuillez inclure exemple HTML, plutôt que d'essayer de le décrire... vous risquez de manquer un détail essentiel. Vous suggérons de mettre le code de démonstration sur jsfiddle.net
InformationsquelleAutor izolate | 2011-06-04
  1. 7

    Le problème est dans la façon dont vous avez utilisé le css() méthode jQuery. Vous devez utiliser un , pour séparer la propriété et de la valeur plutôt qu'une :.

    Comme suit:

    $(document).ready(function(){

$(".album").click(function() {
    $("#overlay").css("visibility", "visible");
});

});

    Voir ici pour un exemple de travail sur jFiddle.

    (À noter que l'OP a changé la façon dont ils avaient écrit à la propriété dans la question depuis la rédaction de ce.)

    Mise à JOUR

    J'ai mis à jour le code sur JSFilddle pour montrer comment vous pouvez faire cela avec plusieurs li's.

    Voir ici pour le JSFiddle exemple

    Firsly j'ai changé d'id de superposition d'être une classe à la place. C'est parce qu'un ID ne peut exister qu'une fois dans tout document HTML. C'est un identifiant unique et non un conteneur.

    Thr Code JS est simplement en regardant l'objet courant (celui juste a cliqué) et la recherche de tous les enfants avec un nom de classe de "superposition". C'est alors la définition de la visibilité visible pour ces articles.

    $(".album").click(function() {
   $(this).children(".overlay").css("visibility","visible");
});
    • Fait! Merci. Une idée de comment résoudre le nouveau problème, je vais avoir? Je l'ai ajouté dans la mise à jour dans le post original
    • Oui, je vais mettre à jour dans un moment.
    • Veuillez voir ma mise à jour.
    InformationsquelleAutor Jamie Dixon
  2. 5

    Au lieu de

     $("#overlay").css("visibility":"visible");

    utilisation

     $("#overlay").show();

    ou

     $("#overlay").css("visibility","visible");

    Pour le faire disparaître après une certaine période de temps, jetez un oeil à la setTimeout méthode et l'utilisation

     $("#overlay").hide();
    • Merde, j'ai juste édité le post avant de commenté. Une idée de comment la rendre invisible après un certain temps? Une sorte de fonction de temporisation
    • réponse de mise à jour, mais vous devez l'ajouter à votre question.
    • D'accord, ai eu de travail! MAIS le problème, je vais maintenant avoir, c'est que j'ai plusieurs de ces LIs uns à côté des autres.. et quand l'un d'eux est cliqué, la superposition apparaît sur le premier LI, pas celui qui est cliqué.
    • vous devez mettre à jour la question avec de nouvelles informations et une indication de ce que vous avez changé dans la question
    • Aussi, si vous êtes d'avoir plusieurs "#superposition des éléments", qui serait invalide. Vous pouvez uniquement utiliser un id d'une fois dans tout document html. (c'est un identifiant unique, pas un nom de conteneur).
    • .show() n'est pas équivalent à .css("visibility","visible");. Il est équivalent à .css('display', 'block').
    • d'accord, mais compte tenu de l'OP de la description, je suppose qu'il doit être à l'aide d'afficher et de masquer toute façon
    • Mais il veut cliquer sur eux. Si vous utilisez .hide(), ils vont être allé et il n'y aura rien à cliquer.
    • Il veut cliquer sur le LIs, pas la DIVs. C'est le DIVs qui vont être cachés.
    • Si vous masquez tous les enfants de l'élément (ce qui est le cas ici), l'élément ne sera pas cliquable. Voir ce violon pour preuve.
    • tout à fait raison... merci pour coller avec ce point. Si un élément HTML n'a pas visibles enfants, alors il n'y a rien sur l'écran pour cliquer.
    • show ne fonctionne pas avec caché

    InformationsquelleAutor Dancrumb
  3. 2

    Changement

    $("#overlay").css("visibility":"visible");

    à 

    $("#overlay").css("visibility", "visible");
    • Il n'y a rien de mal à faire $("#overlay").css({visibility: visible"});
    • vous avez raison, mais ce n'est pas ce que l'OP avait, à l'origine
    • Ah ok, désolé 🙂
    • Vous pouvez utiliser .show() et .hide().
    InformationsquelleAutor Chandu
  4. 1

    Changement $("#overlay").css("visibility":"visible"); à:

    $(this).children("#overlay").css("visibility", "visible");

    Voir violon pour un exemple vivant.

    Remarque: Vous devez modifier overlay à un attribut de classe.

    • Il a obtenu, merci! si vous pouviez regarder la mise à jour j'ai édité le post et de m'aider avec mon nouveau problème, j'apprécierais vraiment.
    • Ce code résout vos multiples li question. J'ai ajouté un exemple vivant.
    • Wow, ça a bien marché. Je n'avais aucune idée que vous pouvez spécifier .les enfants. Merci beaucoup!
    • btw, changé d'un attribut de classe. bon appel.
    InformationsquelleAutor melhosseiny
  5. 1

    Que voulez-vous dire? Voulez-vous trop de la masquer automatiquement #superposition? "Comment puis-je changer mon code de sorte qu'il apparaît ou disparaît après un certain temps?". Si vous voulez automatiquement, faites ceci:

    var hide = setTimeout(function () {
    $('#overlay').css('visibility', 'hidden');
}, 5000);

    Et de garder à l'esprit que la définition de la visibilité à caché ne cache mais toujours en prenant de l'espace. Réglage display: none (hide()) cache complètement.

    Une autre chose est que vous ne devriez pas utiliser un identifiant div. Comme vous le savez probablement, un ID ne peut être utilisée qu'une fois, qui dit que vous ne pouvez jamais utiliser votre fonction sur plusieurs li avec les mêmes fonctionnalités. Je voudrais faire une classe et puis:

    $('.album').click(function () {
    $(this).children('.overlay').css('visibility', 'hidden');
});

    Cette façon de travailler sur tous les li qui a une superposition div.

    InformationsquelleAutor tbleckert