jQuery展開列表在單擊時未展開

Question

我被這個腳本卡住了。 基本上，我不知道類別的數量（20-50），它們顯示在側邊欄的一個上方。 我想顯示10，然后按一個按鈕時，它將展開以顯示其余部分。 我將這10個暴露在外的剩余金額封閉在稱為cathide的div中。 因此，當我按下按鈕進行顯示時，它應該擴展，但不是。

PHP代碼生成列表，顯示10個類別，然后回顯

<div class="cathide">

然后顯示剩余金額，然后回顯

</div>

這就是將重新命名包含在div中的方式。

這是代碼。

的PHP

if ( $all_categories ) {
$count = 1;

foreach ( $all_categories as $cid => $arr ) {
    $sidebar .= '<a href="index.php?action=sort&cid=' . $cid . '">' . $arr['name'] . ' (' . $arr['count'] . ')</a><br />';

    if ( 10 == $count ) {
        $sidebar .= '<div class="cathide">';
    }

    $count++;
}
$sidebar1 .= '</div>';

} else {
$sidebar = 'There are no categories yet';
}

的CSS

.cathide {
    display:none;
}

jQuery的

$("#showAll").click(function () {
$("cathide").slideDown(500);
$(this).hide();
});

$("#hide").click(function () {
$("cathide").slideUp(500, function () {
    $("#showAll").show();
});

});

的HTML

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="tab">
Categories
</td>
</tr>
<tr>
<td class="trow2">

{$sidebar} // Used to call 10 cats then div class=cathide then remaining cats

{$sidebar1} // Used to call /div
<input type="button" value="Show all" id="showAll" />
<input type="button" value="Hide" id="hide" />

</td>
</tr>
</table>

Answer 1

如上所述，您缺少window.onload偵聽器，因此需要執行以下操作：

$(window).ready( function() { 

    $("#showAll").click(function () {
       $(".cathide").slideDown(500);
       $(this).hide();
    });

   $("#hide").click(function () {
       $(".cathide").slideUp(500, function () {
    $("#showAll").show();
    });

});