javascript - 使用 jQuery 显示/隐藏列表项

Question

所有这些都是代码: http://jsfiddle.net/yrgK8/

我有一个“新闻”部分，由以下部分组成:

<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 -->

我有以下 CSS 代码(很简单，只是通过绝对定位将 li 叠加在彼此之上):

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

最后，这是实现这一切的 jQuery 代码。基本上它所做的是将一个 LI 的不透明度设置为 0，然后将下一个 LI 的不透明度设置为 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

那么问题是什么？问题是它们堆叠在一起。这适用于 LI 仅包含文本的情况。但是，其中一些包含链接。当不透明度为 0 的 LI 堆叠在不透明度为 1 的 LI 顶部并且包含链接时，这会成为一个问题。您无法单击该链接。

有人知道我该如何解决这个问题吗？

非常感谢，

阿米特

Answer 1

将事件元素的 z-index 设置为某个高值，这样它就会高于所有元素，链接应该不再是问题。