使用jQuery显示/隐藏列表项

Question

All of this is code is here: http://jsfiddle.net/yrgK8/

I have a "news" section which is composed of the following:

<ul id="news">

      <li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p></li>
      <li><p><a href="http://google.com">google.com link</a</p></li>                   
 </ul>                          
                <div id="newsNav">
                    <span id="newsRight"><a href="#"><img src="http://engineercreativity.com/samples/einav/images/newsleft.png" alt="&gt;" /></a></span>
                    <span id="newsLeft"><a href="#"><img src="http://engineercreativity.com/samples/einav/images/newsright.png" alt="&lt;" /></a></span>
                </div><!-- /#newsNav -->

And I have the following CSS code (simple, just pretty much overlay the li's on top of each other with absolute positioning):

ul#news { list-style-type: none; position:relative; height:101px; color: black; }
ul#news > li { font-size: 11px; margin: 10px; margin-right: 15px; position: absolute; top: 0; right:0; opacity: 0; filter:alpha(opacity=0);  color: black; }

And finally, this is the jQuery code that makes it all happen. Basically what it does is it animates the opacity of one LI to 0, and then animates the opacity of the next LI to 1.

$('ul#news li:first').addClass('active').addClass('firstNews');

$('ul#news > 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.animate({opacity:0.0}, 300, function() {
            //when done animating out, animate next in
            $next.css({opacity:0.0})
                .animate({opacity: 1.0}, 400, function() {
                $active.removeClass('active');
                $next.addClass('active');
        });
    });

    return false; 
}); //clickRight

$('#newsRight').click(function() {

    var $active = $('ul#news li.active');
    var $previous = $active.prev().length ? $active.prev() : $('ul#news li.firstNews');

        $active.animate({opacity:0.0}, 300, function() {
            //when done animating out, animate next in
            $previous.css({opacity:0.0})
                .animate({opacity: 1.0}, 400, function() {
                $active.removeClass('active');
                $previous.addClass('active');
        });
    });

    return false; 
}); //clickRight

So what's the problem? The problem is that they're stacked on top of each other. This works if the LIs only contain text. However, some of them contain links. This becomes a problem when there's an LI with opacity of 0 that's stacked on top of your LI with opacity of 1 and which contains a link. You can't click the link.

Anyone know how I can fix this?

Thanks a lot,

Amit

Answer 1

将活动项的z-index设置为某个高值，因此它将高于它们所有，并且链接不应再是问题。

Answer 2

I would think setting display:none at the end of the transition would fix your problem.

However, it seems like it would be better to use jQuery's built-in .fadeOut() , since this would handle the opacity as well as setting the display to none .

If you don't want to use that, you should set display to none yourself using css.

Answer 3

尝试在设置不透明度的同时设置li元素的z-index。