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代码问题（新手）

回答

相关问题