Question

我有一个“新闻”部分，其中包含以下内容：

<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代码（简单，只是将绝对定位叠加在彼此之上）：

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仅包含文本，则此方法有效。但是，其中一些包含链接。如果LI的不透明度为0且堆叠在LI的顶部，且不透明度为1且包含链接，则会出现问题。您无法点击该链接。

任何人都知道如何解决这个问题？

非常感谢，

阿米特

Answer 1

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

Answer 2

我认为在转换结束时设置display:none会解决您的问题。

然而，使用jQuery的内置.fadeOut()似乎更好，因为这会处理不透明度并将display设置为none。

如果您不想使用它，则应使用css将display设置为none。

Answer 3

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

使用jQuery显示/隐藏列表项

3 个答案: