Jquery製作簡單的查詢條件框隱藏與顯示__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() {// 擷取元素idvar 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>

最後的效果就是：