Question

我对jquery很新，我有一个需要帮助的问题。
我在我的页面上创建了一个新闻栏目，左边是新闻项目列表，点击一个项目后，右侧会打开详细信息。一切正常，除了我注意到我正在隐藏而不是删除不活动的细节。因此，假设我有10次新闻项目，将有10个相应的详细信息在彼此之上，它们在项目被点击之前是不可见的，然后它们变得可见。我遇到的问题是每个细节都包含链接，一旦细节处于活动状态，我仍然可以“看到”其他细节上应该处于非活动状态的链接。（参见=如果我把鼠标放在那里，它会显示那里有一个链接。如何删除不活动的细节，以免发生这种情况？

这是我的代码：

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。

任何帮助？

Answer 1

$("#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;
});

这有用吗？顺便说一句，请以更清洁的方式格式化您的代码。

Answer 2

如果您想要隐藏链接，请使用.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

jquery代码问题（新手）

2 个答案: