jqueryによって既に隠されているdivの背景イメージを非表示にする方法

Question

これは少し説明が分かりにくいです。私のページでhttp://newmedia.leeds.ac.uk/ug10/cs10mm/abduction.html 私はショーの「もっと」と「少ない」オプションを持っています。クリックすると、テキストと背景画像のドロップダウンが表示されます。しかし、ドロップダウン・ディビジョンの背景画像の小さなセクション（上部）は隠れません。誰がなぜこのことが分かっているのですか？

このため、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から "表示なし" とidの命令でのdivに追加して、これを試してみてください。あなたのリンクから

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

    }); 

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

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

});  

Answer 2

あなたがpタグを隠していると、背景がそのコンテナの上にあるので、これが起こりますintructions.代わりにそれを隠す。

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