DIV bei LI-Klick sichtbar machen

Question

Ich habe eine div id "Overlay", das sichtbar gemacht werden soll, wenn der Benutzer auf das Symbol klickt li die sie umschließt.

Das HTML:

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

Der CSS:

#overlay { visibility: hidden; }

Das 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;
});

});

Aktualisierung: Der Code funktioniert jetzt. Ich habe den Code geändert, was ich verwende. Das DIV#overlay wird angezeigt, wenn das LI.album angeklickt wird, allerdings habe ich mehr als eines dieser LI.albums nebeneinander und egal welches LI angeklickt wird, das #overlay wird nur auf dem ersten LI angezeigt. Haben Sie eine Idee, wie man das beheben kann?

Answer 1

Das Problem liegt darin, wie Sie die css() jQuery-Methode. Sie müssen eine , um die Eigenschaft und den Wert zu trennen, anstatt eine : .

Etwa so:

$(document).ready(function(){

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

});

Siehe hier für ein funktionierendes Beispiel auf jFiddle.

(Beachten Sie, dass die OP die Schreibweise der Eigenschaft in der Frage seit dem Verfassen dieses Artikels geändert hat).

UPDATE

Ich habe den Code auf JSFilddle aktualisiert um zu zeigen, wie Sie dies mit mehreren li 's.

Hier finden Sie das vollständige JSFiddle-Beispiel

Erstens habe ich Ihr id-Overlay geändert, um eine Klasse zu sein. Das liegt daran, dass eine ID nur einmal in einem HTML-Dokument vorkommen kann. Es ist ein eindeutiger Bezeichner, kein Container.

Thr JS Code ist einfach auf der Suche nach dem aktuellen Objekt (die gerade angeklickt) und finden Sie alle Kinder mit einem Klassennamen von "Overlay". Es wird dann die Sichtbarkeit auf sichtbar für diese Elemente eingestellt.

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

Answer 2

Anstelle von

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

verwenden.

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

oder

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

Um sie nach einer gewissen Zeit verschwinden zu lassen, sehen Sie sich die setTimeout Methode und Anwendung

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

Answer 3

Ändern Sie

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

まで

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

Answer 4

Ändern Sie $("#overlay").css("visibility":"visible"); zu:

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

Voir fiddle für ein Live-Beispiel.

Hinweis: Sie sollten die overlay auf ein Klassenattribut.

Answer 5

Wie meinen Sie das? Willst du, dass #overlay automatisch ausgeblendet wird? "Wie ändere ich meinen Code so, dass er nach einiger Zeit ausschaltet?". Wenn Sie es automatisch wollen, tun Sie dies:

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

Und denken Sie daran, dass die Sichtbarkeit auf "versteckt" eingestellt ist, aber immer noch den Platz einnimmt. Einstellung display: none (hide()) verbirgt sie vollständig.

Eine weitere Sache ist, dass Sie keine id für dieses div verwenden sollten. Wie Sie wahrscheinlich wissen, kann eine ID nur einmal verwendet werden, das heißt, Sie können nie Ihre Funktion auf mehrere li's mit der gleichen Funktionalität verwenden. Ich würde es eine Klasse machen und dann:

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

Auf diese Weise wird es auf jeder li, die ein Overlay div hat funktionieren.