Question

这个解释有点令人困惑。在我的页面http://newmedia.leeds.ac.uk/ug10/cs10mm/abduction.html 我有一个'更多'和'更少'的选择。单击时，会出现带有文本和背景图像的下拉列表。然而，下拉div的背景图像的一小部分（顶部），不会隐藏。有谁知道为什么会这样？

这个html如下，其次是css：

<div id="MORE">

    <button id="more">More</button>
    <button id="less">Less</button>

<div id="instructions">
    <p style="display: none"> The Mayor of Scaredy Cat Town has been abducted. Lawlessness has broken out across London and the city needs your help    to find him. Follow the links on this site to scour the city in search of The Mayor. A reward, courtesy of The Mayor and his staff, is  available for anyone able to find him. <br /> The Reward... <br /> An exclusive night of entertainment at the Mayors up-market bar, hosted by his   head waiter,Henri. </p>
</div>

    <script>
        $("button#more").click(function () {
        $("p").show("slow");
        });

      $("button#less").click(function () {
      $("p").hide("slow");
    });    
    </script>
</div>

... CSS

#MORE {
    position:relative;
    z-index:100;
}

#more, #less {
    background:none;
    border:none;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;
    cursor: pointer;

Answer 1

发生这种情况是因为您隐藏了p标记，背景位于其容器intructions.上隐藏了该内容。

$("#instructions").show("slow");

Answer 2

从p中删除style =“display：none”并将其添加到带有id指令的div中，然后尝试：

$（“按钮#more”）。点击（function（）{

    $("div#instructions").show("slow");

    });

  $("button#less").click(function () {

  $("div#instructions").hide("slow");

});

如何隐藏已被jquery隐藏的div的背景图像

2 个答案: