Jquery制作简单的查询条件框隐藏与显示

非常简单的一个功能，搞不懂为什么就非得让我出手，20分钟就搞定了简单版，觉得不过瘾，又做了一个jquery插件版，基本上页面中不用加任何代码即可实现。制作过程：

查询条件在页面数据展示页面的上部，所以我将隐藏和显示的按钮设计在查询条件表单的下边，大概想象了一下，如图：



好，根据想象基本框架如下：

<div id="mice_switchbox">
<div id="mice_switchbox_frame">
<div id="mice_switchbox_toggle_btn"></div>
</div>
</div>

mice_switchbox是最外框，定义了上边一条黄色的线
mice_switchbox_frame是中线的黄色按钮
mice_switchbox_toggle_btn则是箭头图标的定义
选用jquery的toggle函数，这里需要说名一下，我用的是jquery1.9，取消掉了.toggle(function, function, ... )函数，所以没办法很简单的实现，详细如下：

This is the "click an element to run the specified functions" signature of .toggle().
It should not be confused with the "change the visibility of an element" of .toggle() which is not deprecated.
The former is being removed to reduce confusion and improve the potential for modularity in the library.
The jQuery Migrate plugin can be used to restore the functionality.

在网上找箭头，png的，最后找到一个.ai格式的，需要使用导出功能才能导出为png格式的，然后再使用ps处理图片的大小（我不会使用ai软件），处理后的样子就是上边图片中间的那个箭头

点击这个箭头后，上边的内容收起，并且箭头改为向下，代码如下：

function mice_switchbox(boxID){
$("#"+boxID).toggle(1000, function(){
var pngPath = $("#mice_switchbox_toggle_btn").css('backgroundImage');
if(pngPath.indexOf('arrow_up.png')==-1){
$("#mice_switchbox_toggle_btn").css('backgroundImage', 'url(arrow_up.png)');
}else{
$("#mice_switchbox_toggle_btn").css('backgroundImage', 'url(arrow_down.png)');
}
});
}

搞定后，觉得不过瘾，因为系统中查询框挺多的，如果要改的话，每个页面都需要加上边提到的div，而且如果一个页面中有好几个需要隐藏的表单，则此方法并不通用，则想到了使用jquery插件
插件代码如下：

(function($) {
// 隐藏显示切换框插件
$.fn.mice_swidthBox = function() {
// 获取元素id
var thisID = $(this).attr("id");
// 将按钮加入到想要操作的元素后边
var switchBox = "<div id='"+thisID+"_mice_switchbox' class='mice_switchbox'>";
switchBox = switchBox + "<div id='"+thisID+"_mice_switchbox_frame' class='mice_switchbox_frame' onclick='mice_switchbox(\""+thisID+"\")'>";
switchBox = switchBox + "<div id='"+thisID+"_mice_switchbox_toggle_btn' class='mice_switchbox_toggle_btn'></div>";
switchBox = switchBox + "</div>";
switchBox = switchBox + "</div>";
$(switchBox).insertAfter($(this));
};
})(jQuery);

function mice_switchbox(obj){
$('#'+obj).toggle(1000, function(){
var pngPath = $("#"+obj+"_mice_switchbox_toggle_btn").css('backgroundImage');
if(pngPath.indexOf('arrow_up.png')==-1){
$("#"+obj+"_mice_switchbox_toggle_btn").css('backgroundImage', 'url(arrow_up.png)');
}else{
$("#"+obj+"_mice_switchbox_toggle_btn").css('backgroundImage', 'url(arrow_down.png)');
}
});
}

内容很简单，就是将展开收回的div，自动加入到想要处理的表单的元素之后，然后根据表单id绑定好事件就可以了
使用的时候引入我的插件js，css，在要处理的页面加入如下代码即可：

<script type="text/javascript">
$(document).ready(function(){
$("#divObj").mice_swidthBox();
$("#divObjxxx").mice_swidthBox();
});
</script>

最后的效果就是：