$(function(){
成都创新互联公司主要从事成都网站建设、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务惠山,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
$(".nav-link").click(function() {
$(this).addClass("active").siblings(".nav-link").removeClass('active');
});
});
jquery mobile已经提供了这个功能，直接调用就可以了。
你可以研究下jm的panel
你指的是：
这种效果么？？？
如果是的话可以考虑使用mmenu Jquery插件，很强大。pc，移动都可以用。
使用代码：(第三方资源可以自己现在或者是到我的博客中下载)
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title mmenu演示 /title
!--需要的第三方包--
link href="font-awesome.min.css" rel="stylesheet" type="text/css"
link href="jquery.mmenu.all.custom.css" rel="stylesheet" type="text/css"
link href="bootstrap.min.css" rel="stylesheet"
script src="jquery.min.js" type="text/javascript"/script
script src="jquery.mmenu.min.all.js"/script
script src="bootstrap.min.js"/script
span style="white-space:pre" /span
script type="text/javascript"
$(document).ready(function() {
$("#main_menu").mmenu({
counters: true,
classes: "mm-light mm-zoom-menu mm-zoom-panels",
searchfield: true,
footer: {
add: true,
content: "Powered by Real @2014"
}
});
});
/script
/head
body
nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0"
div class="navbar-head"
div class="navbar-brand"
a href="#main_menu"点击/a
/div
/div
ul class="nav navbar-top-links navbar-right"
li
aaa
/li
li class="dropdown"
a class="dropdown-toggle" data-toggle="dropdown" href="#"
aaa
/a
ul class="dropdown-menu dropdown-user"
li111/li
li class="divider"/li
li222/li
/ul
/li
/ul
/nav
nav id="main_menu" class="noprint"
ul
li
span菜单一/span
div
ul
span style="white-space:pre" /spanlia href=""1/a/li
lia href=""2/a/li
lia href=""3/a/li
/ul
/div
/li
li
span菜单二/span
div
ul
lia href=""1/a/li
/ul
/div
/li
li
span菜单三/span
div
ul
lia href=""1/a/li
span style="white-space:pre" /spanlia href=""2/a/li
lia href=""3/a/li
lia href=""4/a/li
/ul
/div
/li
/ul
/nav
/body
/html
如果你想要的不是这个效果，请贴出效果图。
1、 在comments.php评论表单中添加自己想要的字段，如：
p
input type="text" name="tel" id="tel" size="22" tabindex="4" /
label for="tel"电话/label
/p
tabindex 这个属性按照从小到大排，为什么要这样？你可以自己试试….
2、如果评论表单是使用系统自带的，那么请用以下方法添加表单字段，如果不是，请略过
add_filter('comment_form_default_fields','comment_form_add_ewai');
function comment_form_add_ewai($fields) {
$label1 = __( '国家/地区' );
$label2 = __( 'Skype账号' );
$label3 = __( '电话' );
$label4 = __( '传真' );
$label5 = __( '地址' );
$value1 = isset($_POST['guojia']) ? $_POST['guojia'] : false;
$value2 = isset($_POST['skype']) ? $_POST['skype'] : false;
$value3 = isset($_POST['tel']) ? $_POST['tel'] : false;
$value4 = isset($_POST['fax']) ? $_POST['fax'] : false;
$value5 = isset($_POST['address']) ? $_POST['address'] : false;
$fields['guojia'] =HTML
p
label for="guojia"{$label1}/label
input id="guojia" name="guojia" type="text" value="{$value1}" size="30" /
/p
HTML;
return $fields;
}
3、 接收表单字段并写入数据库
在主题目录的 functions.php添加以下代码
add_action('wp_insert_comment','wp_insert_tel',10,2);
function wp_insert_tel($comment_ID,$commmentdata) {
$tel = isset($_POST['tel']) ? $_POST['tel'] : false;
//_tel 是存储在数据库里的字段名字，取出数据的就会用到
update_comment_meta($comment_ID,'_tel',$tel);
}
这两步就可以将数据写入数据库了，不信你试试看
add_action()参数中的10和2分别表示该函数执行的优先级是10（默认值，值越小优先级越高），该函数接受2个参数。
4、在后台显示额外字段
前面两步只是接收和写入到数据库，那么要怎么在后台评论列表中显示呢？将以下代码复制到主题目录的functions.php 中：
add_filter( 'manage_edit-comments_columns', 'my_comments_columns' );
add_action( 'manage_comments_custom_column', 'output_my_comments_columns', 10, 2 );
function my_comments_columns( $columns ){
$columns[ '_tel' ] = __( '电话' ); //电话是代表列的名字
return $columns;
}
function output_my_comments_columns( $column_name, $comment_id ){
switch( $column_name ) {
case "_tel" :
echo get_comment_meta( $comment_id, '_tel', true );
break;
}
如果要在前台的留言列表中调用，就用以下代码，_tel就是你在数据库中存储的字段名字
?php
$tel = get_comment_meta($comment-comment_ID,'_tel',true);
if( !empty($tel)){
echo "电话".$tel;
}
?
5、 大功告成，看看后台的评论列表，是不是多了一列电话，那样的话就没错了。
6、如果要移除某一个自带的表单字段，可以使用以下代码
function tel_filtered($fields){
if(isset($fields['tel']))
unset($fields['tel']);
return $fields;
}
add_filter('comment_form_default_fields', 'tel')
$(document).ready(function(){
$("#according li").click(function(){
$(this).children("ul").slideToggle();
});
});
1.UI.Layout jQuery UI布局插件
官方网站：
使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局可以创建任何你想要的UI外观; 从简单的标题或侧边栏到具有工具栏，菜单，帮助面板，状态栏，子表单等的复杂应用程序。集成并增强其他UI小部件，如选项卡，手风琴和对话框，以创建丰富的界面。
2.jQUery Masonry
官方网站：
所有项目的大小和样式都由您自己的CSS处理。项目大小可以用响应式布局的百分比来设置
3.jLayout
jLayout JavaScript库提供了用于布局组件的布局算法。一个组件是一个抽象; 它可以通过多种方式实现，例如HTML5 Canvas绘图中的项目或HTML元素。jLayout库允许您专注于绘制各个组件，而不是如何将其排列在屏幕上。
GitHub：
4.jQuery pageSlide
Query pageSlide 是一个jQuery插件，它可以控制一个隐藏页面的显示和关闭。jQuery展开左右侧栏目插件PageSlide，pageslide插件功能实现现实隐藏侧边栏的功能。插件可以读取另个一html,也可以是当前页面中的元素，目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的
demo：
5.jQSlickWrap
jQSlickWrap是一个真正可以将内容包裹在图片周围的jQuery插件。该插件使用HTML5 Canvas标签,用法非常简单。可以轻松而准确地实现浮动图像的文字环绕效果。
6.Columnizer
官方网址：
Columnizer jQuery Plugin将自动以报纸列格式来布局您的内容。您可以指定列宽或列的静态数量。而且，当然，这很容易使用！Columnizer会将CSS类添加到它创建的列中。每列将有一个“列”类名。第一列将有“第一”，最后一列将有“最后”。这使您可以更轻松地定位CSS标记中的特定列。
github:
7：Columns
jQueryJSON数据转换为html表插件Columns
GitHub：
Columns创建JSON数据转化为HTML方法 引用jQuery库1.7或更高版本和Columns插件文件，列是将JSON数据创建为可排序，可搜索和分页的HTML表格的简单方法。所有你需要的是提供的数据，和列将完成其余的。因为Columns动态地创建了所有必要的HTML，所以唯一需要的HTML是一个空的HTML元素，比如一个div标签，在初始化时使用相应的id。