Question

我的网站上有一个侧边栏，以此格式显示类别。

Category1
Category2
Category3
Category4
Category5

但是我需要显示大约50个。而不是让我的侧边栏伸展得很远并且看起来不合适我想要显示前10个，然后提供一个按钮，允许侧边栏展开以显示其余部分。所以在默认情况下它显示10但是如果单击按钮它会扩展，我将能够看到所有50.我几乎可以肯定这会使用一些jQuery但是我不知道从哪里开始。

以下是从数据库中获取类别的函数。

function load_categories()
{
global $db;

$query = $db->write_query('
    SELECT c.*, COUNT(n.id) AS count
    FROM ' . TABLE_PREFIX . 'newscategories c
    LEFT JOIN ' . TABLE_PREFIX . 'news n ON FIND_IN_SET (c.cid, n.cid)
    GROUP BY c.cid
    ORDER BY count DESC
    ');
while ($cat = $db->fetch_array($query)) {

    $categories[$cat['cid']] = array(
        'name' => $cat['name'],
        'count' => $cat['count']
       );

}

return $categories;
}

以下是一些PHP代码，它们将在新行上输出每个类别。

if ($all_categories) {
 foreach ($all_categories as $cid => $arr) {

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

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

Answer 1

下面的代码将解决您的目的。我为您的要求创建了 fiddle 。

<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF-8">
<style>
#mysidebar{
    height: 200px;
    overflow-y: scroll;
    width: 150px;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script type="text/javascript">
  $(document).ready(function(){

    $('#mybutton').click(function(){
    $('#mysidebar').css('height','100%');

    });

});
</script>
<body>
<div id="mysidebar">
    <p>category1</p>
    <p>category2</p>
    <p>category3</p>
    <p>category4</p>
    <p>category5</p>
    <p>category6</p>
    <p>category7</p>
    <p>category8</p>
    <p>category9</p>
    <p>category10</p>
    <p>category1</p>
    <p>category2</p>
    <p>category3</p>
    <p>category4</p>
    <p>category5</p>
    <p>category6</p>
    <p>category7</p>
    <p>category8</p>
    <p>category9</p>
    <p>category10</p>
    <p>category1</p>
    <p>category2</p>
    <p>category3</p>
    <p>category4</p>
    <p>category5</p>
    <p>category6</p>
    <p>category7</p>
    <p>category8</p>
    <p>category9</p>
    <p>category10</p>

</div>
<div>
    <button id="mybutton">click here to expand it</button>
</div>
</body>
</html>

Answer 2

这是您的要求的一个非常简单的实现：

http://jsfiddle.net/thecbuilder/3dyuC/1/

方法：

分类为2个div。（10,40）和一个用40个元素切换显示div的按钮。

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

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

});

进一步参考：'

创建可扩展列表以显示其余内容

2 个答案: