创建可扩展列表以显示其余内容
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/click/
http://api.jquery.com/show/和http://api.jquery.com/hide/
http://api.jquery.com/slideup/和http://api.jquery.com/slidedown/
相关文章:
- 基础画布外滚动条和内容显示,具有宽的主要内容
- FancyBox将DIV的内容显示为iFrame类型
- CKEDITOR的内容显示不正确
- 当内容显示在FireFox的iFrame中时,jQuery高度问题
- 如何将二维javaScript数组的内容显示到HTML表中
- C# 根据所选内容显示图像
- 内容显示中的 JavaScript 错误“无法设置未定义的属性”显示”
- 如何使用角度 js 将动态内容显示在 ck 编辑器中
- Jqmobile 页面 - 第二页的精彩内容显示在第一页上
- 将网站的某些内容显示在 Web 视图中
- 如何打开根据用户在上一个屏幕上选择的内容显示不同图像的页面
- 选择框根据所选内容显示另一个
- 在javascript中,我如何根据用户指向的内容显示不同的文本
- 根据用户从下拉列表中选择的内容显示国家/地区代码
- 将表单中从下拉框中选择的内容显示为只读
- 如何使列的内容显示在工具提示时悬停?HTML5
- 如何使工具提示内容显示在单行中
- HTML内容显示有限行
- 如何隐藏可折叠的标题时,可折叠的内容显示在Jquery移动
- 没有数据库内容显示(Meteor, AngularJS, mongodb)