javascript - Using jQuery to show/hide list items -
All this is here:
I have a "News" section which is the following:
& lt; Ul id = "news" & gt; & Lt; Li & gt; & Lt; P & gt; Asfdsadfdsafdsafdsafdsafdsafdsafdsa & lt; / P & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; P & gt; & Lt; A href = "http://google.com" & gt; Google.com link & lt; / A & lt; / P & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "newsNav" & gt; & Lt; Span id = "newsRight" & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "http://engineercreativity.com/samples/einav/images/newsleft.png" alt = "& gt ;," / & gt; & Lt; / A & gt; & Lt; / Span & gt; & Lt; Span id = "newsLeft" & gt; & Lt; A href = "#" & gt; & Lt; Img src = "http://engineercreativity.com/samples/einav/images/newsright.png" alt = "& lieutenant," / & gt; & Lt; / A & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt ;! - / # newsNav - & gt;
and I have the following CSS code (Liu's overlay is at the top of each other with a simple, full position):
ul # News {List-style-type: none; Status: Relative; Height: 101px; Art color; } Ul # news & gt; Lee (font-size: 11px; Margins: 10px; Margin-right: 15px; Status: Completed; Top: 0; Correct: 0; Opacity: 0; Filters: alpha (opacity = 0); Art color; }
And finally, it is all that is the jQuery code. Actually what it does, it animates the opacity of a light 0, and then animate next opaque opacity 1.
$ ('ul # news li: ago'). AddClass ('active') addClass ('firstNews'). $ ('Ul # news & gt; li') CSS ({opacity: 0.0}). Filter ('ul # news li.firstNews'). CSS ({Opacity: 1.0}); $ ('# NewsLeft'). Click (function () {var $ active = $ ('ul # news li.active'); var $ next = $ active.next (). Length? $ Active.next (): $ ('Ul # news li .firstNews'); $ active .net ({opacity: 0.0}, 300, function () {// When animated out, get addicted to next next.css ({Opacity: 0.0}) (Appetite: 1.0}, 400, function () {$ active .removeClass ('active'); $ next AddClass ('active');});}); Return;}); // clickRight $ ('# newsRight'). Click (function () {var $ active = $ ('ul # news li.active'); var $ previous = $ active.prev (). Length? $ Active.prev (): $ ('Ul # news li .firstNews'); $ active .net ({opacity: 0.0}, 300, function () {// When animated out, come back to $ previous.css ({opacity: 0.0}) .mate ({ Opacity: 1.0}, 400, function () $ $ active. RemoveClass ('active'); $ previous.claims ('active');});}); Return return;}); // clickRight
So what's the problem? The problem is that they are standing on top of each other. It works if LIs only have text, however, some of them include links. This becomes a problem when there is a link with the ambiguity of 0 With opacity of 1, you are standing at the top of the ladder and in which there is a link you can not click on the link.
Does anybody know how I can fix it?
Thank you very much,
Amit
active item Set the z-index to a higher value, so it will be above all of them, and the link should not be a problem.
Comments
Post a Comment