1

我正在尝试使用 jQuery slideToggle() 函数来显示和隐藏包含一些细节的表格。这个想法是，当我点击表格的标题行时，我会得到下面的详细信息。

我正在使用 w3 学校的代码，这是原始代码：
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”类的元素，并且将它们都隐藏了。

这是一个 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 回答