jquery代碼問題（新手）

我是jquery的新手，我遇到了一個需要幫助的問題。
我在頁面上創建了一個新聞欄目，左邊是新聞項目列表，點擊一個項目後，詳細信息在右側打開。一切正常，除了我注意到我是隱藏，而不是刪除不活動的細節。因此，假設我有10次新聞項目，將會有10個對應的細節相互重疊，直到該項目被點擊後才能看到它們。我遇到的問題是每個細節都包含鏈接，一旦細節處於活動狀態，我仍然可以「看到」應該處於非活動狀態的其他鏈接。（見=如果我把鼠標在那裏，就說明有一個環節出現如何刪除不活動的細節，以便不會發生這種情況jquery代碼問題（新手）

這裏是我的代碼：？

HTML

<div id="overlay_news"><h3><a href="#">Item 1</a></h3> 
<div class="news_text"> 
    <h4>Item 1<h4> 
    <p>Detail 1 <a href="link1.com"></a></p> 
</div><h3><a href="#">Item 2</a></h3> 
<div class="news_text"> 
    <h4>Item 2<h4> 
    <p>Detail 2 <a href="link1.com"></a></p> 
</div>

JQUERY

$("#overlay_news div").css({ opacity: 0 });$("#overlay_news h3 a").click(function(){ 
$(this).addClass("news_active"); 
$(this).parent().siblings("h3").children("a").removeClass("news_active"); 
$(this).parent().siblings("div").animate({ opacity: 0}, 100); /*PROBLEM HERE*/ 
$(this).parent().next("div").animate({ opacity: .8}, 400); 
return false;});

我註釋掉的行，我覺得日問題在於。而不是將不透明度更改爲0，我應該刪除該div，以便只顯示活動div。

任何幫助？

來源

2010-09-27 Kenneth

$("#overlay_news div").css({ opacity: 0 }); 
$("#overlay_news h3 a").click(function(){ 
    $(this).addClass("news_active"); 
    $(this).parent().siblings("h3").children("a").removeClass("news_active"); 
    $(this).parent().siblings("div").animate({ opacity: 0}, 100, function() { 
     $(this).css("display", "none"); 
    }); 
    $(this).parent().next("div").css("display", "block").animate({ opacity: .8}, 400); 
    return false; 
});

這是行得通嗎？順便說一下，請以更簡潔的方式格式化您的代碼。的

來源

2010-09-27 10:01:24

如果你想隱藏的鏈接，使用.fadeOut()而不是.animate({ opacity: 0 })（它設置display: none;末）和.fadeTo()而不是設置不透明度背（所以它刪除display: none;）......使細節佔用任何空間時隱藏的，總體是這樣的：

$("#overlay_news div").hide(); 
$("#overlay_news h3 a").click(function() { 
    $(this).addClass("news_active"); 
    $(this).parent().siblings("h3").children("a").removeClass("news_active"); 
    $(this).parent().siblings("div").fadeOut(100); 
    $(this).parent().next("div").fadeTo(400, 0.8); 
    return false; 
});

You can try it out here，請注意，我們也使用.hide()設置display: none;開始。該版本是比你原來的代碼是明確的，這裏是創造更少的jQuery對象更高效的版本：

$("#overlay_news div").hide(); 
$("#overlay_news h3 a").click(function() { 
    $(this).addClass("news_active") 
      .parent().siblings("div").fadeOut(100).end() 
      .next("div").fadeTo(400, 0.8).end() 
      .siblings("h3").children("a").removeClass("news_active"); 
    return false; 
});

You can give it a try here。

來源

2010-09-27 10:09:11

jquery代碼問題（新手）

回答

相關問題