Question

我有一堆具有相同类的项目，当选择时打开工具提示和下拉菜单。它适用于单个项目，但为了让每个人都能使用它的特定孩子，我使用了.children（）。它似乎在某些地方有效，但在其他地方没有。我已经缩小了什么不起作用，但没有想到为什么......请帮忙。

HTML：

<div class="topIcon">

<a href="stream.html"><img src="icons/stream16lg.png" /></a>
<div class="topIconNew"></div>
<div class="topTip">
    <div class="topTipText">Stream</div>
</div>
<div class="topDrop">Hello</div>

</div>

jQuery的：

$("div.topIconNew").click(function(){
 //working
$(this).parent("div.topIcon, div#topSend, div#topTool").css("background-color","#555555");
 //working
$(this).children("div.topTip").show();  
 //not working
$(this).children("div.topTip").animate({width:320,marginLeft:-240},"fast");
 //not working
$(this).children("div.topDrop").slideDown(240);
clicked = true;
});

我没有包含CSS，因为我不确定这是什么问题。我认为这是我的jQuery，但我真的不知道。任何和所有的帮助表示赞赏。

Answer 1

所以我对你的JavaScript有点困惑。例如，div.topIconNew没有孩子，所以我不确定为什么$(this).children("div.topTip").show();应该有效？也许您想使用$(this).siblings("div.topTip").show();？

继承适合您的JavaScript：

$("div.topIconNew").click(function(){
    $(this).parent("div.topIcon, div#topSend, div#topTool")
           .css("background-color","#555555");

    $(this).siblings("div.topTip")
           .show()
           .animate({width:320,marginLeft:-240},"fast");

    $(this).siblings("div.topDrop").slideDown(240);

    clicked = true;
});

Answer 2

这些行

<div class="topIconNew"></div>
<div class="topTip">
    <div class="topTipText">Stream</div>
</div>
<div class="topDrop">Hello</div>

应该是

<div class="topIconNew">
    <div class="topTip">
        <div class="topTipText">Stream</div>
    </div>
    <div class="topDrop">Hello</div>
</div>

Answer 3

topTip不是topIconNew的孩子或后代。这是一个兄弟姐妹。所以你想使用.siblings()。

$("div.topIconNew").click(function() {
    $(this).parent("div.topIcon, div#topSend, div#topTool").css("background-color","#555555");
    $(this).siblings("div.topTip").show();  
    $(this).siblings("div.topTip").animate({width:320,marginLeft:-240},"fast");
    $(this).siblings("div.topDrop").slideDown(240);
    clicked = true;
});

我正努力让.children（）去工作

3 个答案: