隐藏/显示无法与 jquery 一起正常工作

Question

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

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

我遇到的问题是在单击“更多信息”链接之前隐藏<tr>。 <tr> 所在的位置只有一个空白区域。 <tr> 中的信息被 jQuery（下面的脚本）隐藏，然后在单击“更多信息”时显示。

我尝试用 CSS 隐藏“mi”，但是当点击“更多信息”按钮时，什么也没有发生。

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

脚本

索引

<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 中隐藏“更多信息”的 div。只需为此添加 CSS：

div.more-information { display: none; }

Answer 2

你隐藏了more-information div，但你没有隐藏它的父元素，<tr> 类mi。尝试将id 属性放在<tr> 中而不是封闭的div 中，并隐藏整行。此外，您必须听取 cletus 的建议，不要重复 id 和不必要的兄弟隐藏。