Question

我有一个包含三行主要信息的页面，这些信息都附加了“更多信息”按钮，有点像wefollow.com及其信息按钮。

点击“更多信息”链接时，带有“mi”类的<tr>会在主要信息上方向下滑动。

我遇到的问题是在点击“更多信息”链接之前隐藏<tr>。 <tr>只有一个空格。{1}}。使用jQuery（下面的脚本）隐藏<tr>中的信息，然后在点击“更多信息”时显示。

我尝试用CSS隐藏“mi”但是当点击“More Info”按钮时，没有任何反应。

任何帮助都会很棒。感谢。

脚本

索引

<table>
    <tbody>

        <tr id="info-1"> </tr>
        <tr class="mi">
            <td>
                <div id="1" class="more-information" />
            </td>
        </tr>

        <tr class="">
            <td> </td>
            <td> </td>
            <td> <a id="1" class="more-info" href="#">More info</a> </td>

    </tbody>
</table>

listing.js

$(function(){
    $(".more-information").hide();

    $(".more-info").click(function () {

    var divname= this.id;

    $("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");

    return false;
});

Answer 1

第一个问题是你在重复ID。他们需要独一无二。毫无疑问，这会丢掉你的代码。

<table>
<tbody>
  <tr id="info-1"> </tr>
  <tr class="mi">
    <td><div id="more-1" class="more-information">More information</div></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td><a id="1" class="more-info" href="#">More info</a></td>
  </tr>
</tbody>
</table>

结合：

$(function() {
  $("a.more-info").click(function() {
    $("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
  });
});

不确定为什么你需要隐藏上面的兄弟姐妹。

另外，我不会在jquery中隐藏“more-information”div。只需添加CSS：

div.more-information { display: none; }

Answer 2

您正在隐藏more-information div，但您没有隐藏其父元素，<tr>与类mi。尝试将id属性放在<tr>而不是包含的div中，并隐藏整行。此外，你必须采取关于不重复id和不必要的兄弟隐藏的cletus建议。

使用jquery隐藏/显示无法正常工作

脚本

索引

listing.js

2 个答案: