使用jQuery顯示/隱藏列表項

所有這一切都是代碼是在這裏： http://jsfiddle.net/yrgK8/使用jQuery顯示/隱藏列表項

我有由以下內容的「新聞」欄目：

<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的代碼，使這一切HAPP恩。基本上它是一個動畫李到0的不透明度，然後動畫的下一個李以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堆疊在LI的頂部，不透明度爲1並且包含鏈接時，這會成爲問題。你不能點擊鏈接。

任何人都知道我可以解決這個問題嗎？

非常感謝，

阿米特活動項目一些高價值的

來源

2010-08-03 Amit

組Z指數，所以這將是上述所有這些，和鏈接不應該是問題了。

來源

2010-08-03 13:39:35 azram19

我會試試，謝謝。 IE7是否支持z-index？ – Amit 2010-08-03 13:41:59

是的。但爲什麼你不使用fadeOut？瀏覽器將不勝感激。 – MvanGeest 2010-08-03 13:43:53

非常感謝你，這工作的奇蹟。我會盡快將此設置爲正確的答案讓我來 – Amit 2010-08-03 13:44:31

我認爲在轉換結束時設置display:none可以解決您的問題。

但是，看起來使用jQuery的內置.fadeOut()會更好，因爲這將處理不透明度以及將display設置爲none。

如果你不想使用它，你應該自己設置display到none使用CSS。

來源

2010-08-03 13:40:10 DLH

是的，你完全正確。在我的下一個版本中，我一定會這樣做。謝謝！ – Amit 2010-08-03 17:12:51

嘗試在設置不透明度的同時設置li元素的z-index。

來源

2010-08-03 13:40:38

使用jQuery顯示/隱藏列表項

回答

相關問題