创建可扩展列表以显示其余内容 - Creating expandable list to show rest of content

Creating expandable list to show rest of content

我的站点上有一个侧边栏，它以这种格式显示类别。

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';
}

下面的代码将解决您的目的。我已经根据您的要求创建了小提琴。

<!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>

这是您的需求的一个非常简单的实现:

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();
    });
});

进一步引用:'

http://api.jquery.com/show/和http://api.jquery.com/hide/
http://api.jquery.com/slideup/和http://api.jquery.com/slidedown/