Ultima cosa velocissima: se volessi si chiudesse anche quando riclicco su #alertnews ed è già aperto?
La cosa non è velocissima. Ci sono diversi eventi/variabili in gioco, bisogna fare quindi dei controlli incrociati.
Ho provato ad aggiungere un 0==1 ma ovviamente non funge .-.
Beh, vien da sè che "zero" non sarà mai uguale ad "uno", non pensi? Questa condizione darà sempre falso, quindi non capisco in base a quale principio hai cercato di applicarla.
Vedi un po' così:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
// catturo l'evento click eseguito su un qualsiasi punto del documento
$('html').click(function(e) {
$(e.target).closest('#alertnews').length // controllo se sto cliccando su alertnews
? $('#news_list').toggleClass('aperto') // se ho cliccato su alertnews, allora inverto l'applicazione della classe 'aperto' su news_list
: $('#news_list').removeClass('aperto'); // altrimenti (se ho cliccato in qualsiasi altro punto) la rimuovo
fadeNewsList(+$('#news_list').hasClass('aperto')); // effettuo l'apertura/chiusura di news_list in base alla presenza, o no, della classe 'aperto'
});
// effetto di apertura/chiusura di news_list
function fadeNewsList(o){ // passare 1 per aprire, 0 per chiudere
$('#news_list'+(o?'':':not(.aperto)')).stop().animate({"opacity": o}); // apro/chiudo news_list. Viene ignorata la chiusura se ha la classe 'aperto' (news_list resta aperto)
}
// evento hover su alertnews
$('#alertnews').hover(
function(){fadeNewsList(1)} // se sono sopra, effettuo l'apertura di news_list
, function(){fadeNewsList(0)} // altrimenti, effettuo la chiusura
);
});
</script>
</head>
<body>
<div id="alertnews">
<span style="color:blue">Lorem ipsum</span>
<div id="news_list" style="background:beige;opacity:0">
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<hr>
</body>
</html>