1

jQuery slideToggle() 関数を使用して、詳細を含むテーブルを表示および非表示にしようとしています。アイデアは、テーブルのタイトル行をクリックすると、以下の詳細が表示されるということです。

私は w3 school のコードを使用しています。これはオリジナルです:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

問題は、スライドする div が既存のテーブル ヘッダーと重なることです。
ここでコードを実行した結果を見てください。 http://62.219.127.85/sites/isell/tests/123123.php

onmouseover()現在クリックしようとしているヘッダーを取得するためにを使用 します。
ここに私のコードがあります（私が書いた例であり、実際のものではありません）

誰でもここで何が悪いのか見つけてもらえますか?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<style type="text/css">
#hideme,#triggerSlide
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#hideme
{
padding:50px;
display:none;
}
</style>

<body>
<div id="triggerSlide" class="adID" onmouseover="storeAdID(this);" 
style="padding:2px;">
    <table border="1">
        <tr>
            <th colspan="2">asdasd</th>
        </tr>
    </table>
</div>


<div class="adID" id="hideme">
    <table border="1">
        <tr>
            <td>123</td>
            <td>145</td>
        </tr>
        <tr>
            <td>987</td>
            <td>951</td>
        </tr>
    </table>
</div>
</body>

<script> 
    var adID;

    function storeAdID(obj) {
        adID = obj.className;
    }
</script>

<script>
$(document).ready(function(){
  $("#triggerSlide").click(function(){
    $("."+adID).slideToggle("slow");
  });
});
   </script>
4

1 に答える 1

0

クラス「adID」を持つ 2 つの要素があり、両方を非表示にしています。

ここにJSFiddleがあります：http://jsfiddle.net/mmcglynn/j6z73/

これに近いものが欲しいと思います：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<style type="text/css">
#hideme,#triggerSlide
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#hideme
{
padding:50px;
display:none;
}
</style>

<body>
<div id="triggerSlide" style="padding:2px;cursor:pointer">
    <table border="1">
        <tr>
            <th colspan="2">asdasd</th>
        </tr>
    </table>
</div>


<div class="adID" id="hideme">
    <table border="1">
        <tr>
            <td>123</td>
            <td>145</td>
        </tr>
        <tr>
            <td>987</td>
            <td>951</td>
        </tr>
    </table>
</div>
</body>

<script>
$(document).ready(function(){
  $("#triggerSlide").click(function(){
    $(".adID").slideToggle("slow");
  });
});
</script>
于 2012-09-17T20:13:14.463 に答える