隱藏/顯示不適用於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，但沒有隱藏其父元素（類mi的<tr> 。 嘗試將id屬性放在<tr>而不是封閉的div中，然后隱藏整行。 另外，您還必須聽從有關不重復id和不必要的同級隱藏的建議。