{"id":467,"date":"2017-09-10T17:40:34","date_gmt":"2017-09-10T09:40:34","guid":{"rendered":"http:\/\/www.chenweikang.top\/?p=467"},"modified":"2017-09-12T17:14:42","modified_gmt":"2017-09-12T09:14:42","slug":"%e5%9f%ba%e4%ba%8ejquery%e5%86%99%e7%9a%84%e4%b8%80%e4%b8%aa%e6%89%8b%e9%a3%8e%e7%90%b4%e6%95%88%e6%9e%9c%e7%9a%84%e6%8a%98%e5%8f%a0%e8%8f%9c%e5%8d%95","status":"publish","type":"post","link":"https:\/\/www.chenweikang.top\/?p=467","title":{"rendered":"\u57fa\u4e8eJquery\u5199\u7684\u4e00\u4e2a\u624b\u98ce\u7434\u6548\u679c\u7684\u6298\u53e0\u83dc\u5355"},"content":{"rendered":"<p>\u7531\u4e8e\u9879\u76ee\u4e2d\u5b50\u9875\u9762\u9700\u8981\u4e00\u4e2a\u5c0f\u83dc\u5355\uff0c\u627e\u4e00\u4e2a\u83dc\u5355\u63d2\u4ef6\u592a\u5927\u6750\u5c0f\u7528\uff0c\u53c8\u6015\u548c\u5f53\u524d\u9879\u76ee\u4e2d\u7684\u83dc\u5355\u4e0d\u517c\u5bb9\uff0c\u6240\u4ee5\u52a8\u624b\u81ea\u5df1\u5199\u4e86\u4e00\u4e2a\uff0c\u6211\u53d6\u540d\u4e3aMINIMenu\uff0c\u56e0\u4e3a\u53ea\u6709\u51e0\u5341\u884c\u4ee3\u7801\u3002\u3002\u3002<\/p>\n<h2>HTML\u4ee3\u7801<\/h2>\n<blockquote><p>\u00a0&lt;div id=\"menu\"&gt;<\/p>\n<p>&lt;div class=\"menu-item\"&gt;<\/p>\n<p>&lt;div class=\"item-title\"&gt;<\/p>\n<p>&lt;a class=\"active\" href=\"#\"&gt;\u83dc\u5355\u4e00&lt;\/a&gt;&lt;\/div&gt;<\/p>\n<p>&lt;ul class=\"item-ul\"&gt;<\/p>\n<p>&lt;li&gt;&lt;span&gt;|--&lt;\/span&gt;&lt;a href=\"#\"&gt;\u6a21\u57571&lt;\/a&gt;&lt;\/li&gt;<\/p>\n<p>&lt;li&gt;&lt;span&gt;|--&lt;\/span&gt;&lt;a href=\"#\"&gt;\u6a21\u57572&lt;\/a&gt;&lt;\/li&gt;<\/p>\n<p>&lt;li&gt;&lt;span&gt;|--&lt;\/span&gt;&lt;a href=\"#\"&gt;\u6a21\u57573&lt;\/a&gt;&lt;\/li&gt;<\/p>\n<p>&lt;li&gt;&lt;span&gt;|--&lt;\/span&gt;&lt;a href=\"#\"&gt;\u6a21\u57574&lt;\/a&gt;&lt;\/li&gt;<\/p>\n<p>&lt;\/ul&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>&lt;div class=\"menu-item\"&gt;<\/p>\n<p>&lt;div class=\"item-title\"&gt;&lt;a href=\"#\"&gt;\u83dc\u5355\u4e8c&lt;\/a&gt;&lt;\/div&gt;<\/p>\n<p>&lt;ul class=\"item-ul\"&gt;<\/p>\n<p>&lt;li&gt;&lt;span&gt;|--&lt;\/span&gt;&lt;a href=\"#\"&gt;\u6a21\u57571&lt;\/a&gt;&lt;\/li&gt;<\/p>\n<p>&lt;li&gt;&lt;span&gt;|--&lt;\/span&gt;&lt;a href=\"#\"&gt;\u6a21\u57572&lt;\/a&gt;&lt;\/li&gt;<\/p>\n<p>&lt;\/ul&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>&lt;div class=\"menu-item\"&gt;<\/p>\n<p>&lt;div class=\"item-title\"&gt;<\/p>\n<p>&lt;a href=\"#\"&gt;\u83dc\u5355\u4e09&lt;\/a&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>&lt;\/div&gt;<\/p><\/blockquote>\n<h2>Javascript\u4ee3\u7801<\/h2>\n<p>\u4f9d\u8d56jquery : &lt;script src=\"https:\/\/cdn.bootcss.com\/jquery\/3.2.1\/jquery.min.js\"&gt;&lt;\/script&gt;<\/p>\n<pre class=\"prettyprint linenums\">             \r\n\/*  \r\n* \u521d\u59cb\u5316\u83dc\u5355\u72b6\u6001\uff0c\u5c06\u6240\u6709class\u5305\u542bopen\u7684\u9879\u76ee\u663e\u793a\u51fa\u6765 \r\n*\/  \r\nfunction MINIMenus(settings){  \r\n\t\/\/\u9ed8\u8ba4\u53c2\u6570\r\n\tvar defaultSetting = {\r\n\t animation:\"slide\",  \/\/ \u8bbe\u7f6e\u6298\u53e0\u52a8\u753b\uff1anone \u65e0\u52a8\u753b;slide \u6ed1\u52a8; fade \u6de1\u5165\u6de1\u51fa  \r\n\t mutex:true, \/\/ true(\u4e92\u65a5\uff0c\u83dc\u5355\u53ea\u80fd\u6709\u4e00\u4e2a\u5c55\u5f00),false(\u4e0d\u4e92\u65a5\uff0c\u6bcf\u4e2a\u83dc\u5355\u90fd\u80fd\u5c55\u5f00)  \r\n\t meunId:\"#menu\",\r\n\t} ;\r\n\t$.extend(defaultSetting,settings); \r\n\tinitMenus(defaultSetting.meunId);\r\n\tbindMenus(defaultSetting.meunId,defaultSetting.mutex,defaultSetting.animation);\r\n}  \r\n\r\n\/**\r\n * [initMenus \u521d\u59cb\u5316\u83dc\u5355\uff0c\u5c55\u5f00\u6240\u6709open\u7684\u9879\u76ee]\r\n* \r\n *\/\r\nfunction initMenus(menuID){\r\n    $(menuID).find(\".item-ul\").each(function(){  \r\n\tif($(this).parent().hasClass(\"open\")){  \r\n\t    $(this).find(\"li\").show();  \r\n\t}else{  \r\n\t    $(this).find(\"li\").hide();  \r\n\t }  \r\n    });  \r\n}\r\n\/*  \r\n* \u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\r\n*\/  \r\nfunction bindMenus(menuID,mutex,animation){  \r\n\t$(menuID).find(\".item-title\").bind(\"click\",function(){  \r\n\tvar item=$(this).parent();  \r\n\tlistSize = (item.find(\".item-ul li\")).length;\r\n\t \/\/\u5224\u65ad\u662f\u5426\u6709\u5c55\u5f00\u9879\r\n\tif(listSize&gt;0){\r\n\tif(item.hasClass(\"open\")){  \r\n\t hideItem($(this).next(),animation);  \r\n\t hideAllItems(menuID,mutex,animation);  \r\n\t  if(!mutex){  \r\n\t    item.removeClass(\"open\");  \r\n\t   }  \r\n\t }else{  \r\n\t   hideAllItems(menuID,mutex,animation);  \r\n\t   showItem($(this).next(),animation);  \r\n\t   item.addClass(\"open\");  \r\n\t}  \r\n      }\r\n   });  \r\n}  \r\n\/* \r\n* \u6298\u53e0\u6240\u6709\u5df2\u5c55\u5f00\u83dc\u5355\u9879 \r\n*\/  \r\nfunction hideAllItems(menuID,mutex,animation){  \r\n   if(mutex){  \r\n\t$(menuID).find(\".menu-item\").each(function(){  \r\n\tif($(this).hasClass(\"open\")){  \r\n\t   hideItem($(this).find(\".item-ul\"),animation);  \r\n\t   $(this).removeClass(\"open\");  \r\n\t }  \r\n\t});  \r\n    }  \r\n}  \r\n\/* \r\n* \u6298\u53e0\u6307\u5b9a.item-ul\u4e0b\u7684li\u5143\u7d20\r\n*\/  \r\nfunction hideItem(item,animation){  \r\n    item.find(\"li\").each(function(){  \r\n\t    switch(animation){  \r\n\t        case \"slide\":  \r\n\t            $(this).slideUp();  \r\n\t            break;  \r\n\t        case \"fade\":  \r\n\t            $(this).fadeOut();  \r\n\t            break;  \r\n\t        default:  \r\n\t            $(this).hide();  \r\n\t            break;  \r\n\t    }  \r\n\t})\r\n}  \r\n\/* \r\n* \u5c55\u5f00\u6307\u5b9a.item-ul\u4e0b\u7684li\u5143\u7d20\r\n*\/  \r\nfunction showItem(item,animation){  \r\n   item.find(\"li\").each(function(){  \r\n\t    switch(animation){  \r\n\t        case \"slide\":  \r\n\t            $(this).slideDown();  \r\n\t            break;  \r\n\t        case \"fade\":  \r\n\t            $(this).fadeIn();  \r\n\t            break;  \r\n\t        default:  \r\n\t            $(this).show();  \r\n\t            break;  \r\n\t    }  \r\n    })\r\n}  \r\n<\/pre>\n<h2>CSS\u6837\u5f0f<\/h2>\n<pre class=\"prettyprint linenums\">             \r\n ul{\r\n\tlist-style: none;\r\n\tpadding:0;\r\n\tmargin: 0;\r\n}\r\n#menu{\r\n\tmax-width:14%;\r\n\tmin-height: 500px;\r\n\tcolor:#333;\r\n\tbackground: #fff;\r\n\tmargin-right:8px;\r\n}\r\n#menu .active{\r\n\tbackground: #5eb95e;\r\n\tcolor: #fff;\r\n}\r\n.menu-item{\r\n\ttext-align: center;\r\n\twidth: 100%;\r\n\tcursor: pointer;\r\n\tmargin-bottom:8px;\r\n}\r\n.menu-item  a{\r\n\tpadding: 6px 0;\r\n\tborder-top: 1px solid #eee;\r\n\tbackground:#e8e8e8;\r\n\tborder-radius: 6px;\r\n\tdisplay: block;\r\n\tcolor:#333;\r\n\ttext-decoration: none;\r\n}\r\n.menu-item a:hover,.menu-item .item-ul a:hover{\r\n\tbackground: #5eb95e;\r\n\tcolor: #fff;\r\n}\r\n.menu-item .item-ul{\r\n\tmargin-top: 8px;\r\n}\r\n.menu-item .item-ul li{\r\n\tmargin: 5px 0;\r\n}\r\n.menu-item .item-ul span{\r\n\tdisplay: inline-block;\r\n\twidth: 20%;\r\n}\r\n.menu-item .item-ul a{\r\n\tdisplay: inline-block;\r\n\tpadding: 5px 0;\r\n\tbackground: #e8e8e8;\r\n\ttext-decoration: none;\r\n\tcolor: #333;\r\n\twidth: 80%;\r\n\tborder-radius: 5px;\r\n}\r\n.item{\r\n\tmargin-bottom:8px;\r\n}\r\n<\/pre>\n<h2>\u4f7f\u7528<\/h2>\n<p>\u4f7f\u7528 new MINIMenus({}); \u521d\u59cb\u5316\u5373\u53ef<\/p>\n<p>\u9ed8\u8ba4\u53c2\u6570\uff1a<\/p>\n<p>var defaultSetting = {<\/p>\n<p>animation:\"slide\", \u00a0 \u00a0\/\/ \u8bbe\u7f6e\u6298\u53e0\u52a8\u753b\uff1anone \u65e0\u52a8\u753b;slide \u6ed1\u52a8; fade \u6de1\u5165\u6de1\u51fa<\/p>\n<p>mutex:true, \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ true(\u4e92\u65a5\uff0c\u83dc\u5355\u53ea\u80fd\u6709\u4e00\u4e2a\u5c55\u5f00),false(\u4e0d\u4e92\u65a5\uff0c\u6bcf\u4e2a\u83dc\u5355\u90fd\u80fd\u5c55\u5f00)<\/p>\n<p>meunId:\"#menu\", \u00a0 \/\/\u83dc\u5355\u6240\u5728\u7684ID<\/p>\n<p>} ;<\/p>\n<p>\u5728.menu-item \u52a0\u4e0aclass='open' \u5c06\u5c55\u5f00\u8be5\u83dc\u5355\u4e0b\u7684\u6240\u6709\u5b50\u83dc\u5355<\/p>\n<p>\u5728 a\u6807\u7b7e\u52a0\u4e0aclass='active'\u00a0 \u663e\u793a\u88ab\u9009\u4e2d\u7684\u6548\u679c<\/p>\n<pre class=\"prettyprint linenums\"> $(document).ready(function(){  \r\n        new MINIMenus({\r\n\t   mutex:false,\r\n       });\r\n}); \r\n<\/pre>\n<h2>\u6548 \u679c<\/h2>\n<p><a href=\"http:\/\/www.chenweikang.top\/wp-content\/uploads\/2017\/09\/minimenu.png\" class=\"gallery_colorbox\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-469\" src=\"http:\/\/www.chenweikang.top\/wp-content\/uploads\/2017\/09\/minimenu.png\"  alt=\"\" width=\"1298\" height=\"670\" srcset=\"https:\/\/www.chenweikang.top\/wp-content\/uploads\/2017\/09\/minimenu.png 1298w, https:\/\/www.chenweikang.top\/wp-content\/uploads\/2017\/09\/minimenu-300x155.png 300w, https:\/\/www.chenweikang.top\/wp-content\/uploads\/2017\/09\/minimenu-768x396.png 768w, https:\/\/www.chenweikang.top\/wp-content\/uploads\/2017\/09\/minimenu-1024x529.png 1024w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><\/p>\n<h2>demo\u6f14\u793a\uff1a<\/h2>\n<p><a href=\"http:\/\/www.chenweikang.top\/wp-content\/uploads\/2017\/09\/MINIMenu.html\" target=\"_blank\" rel=\"noopener\">MINIMenu<\/a><\/p>\n<p>\u8f6c\u8f7d\u8bf7\u6ce8\u660e\uff1a<a href=\"https:\/\/www.chenweikang.top\">\u5de6\u624b\u4ee3\u7801\u53f3\u624b\u8bd7<\/a> &raquo; <a href=\"https:\/\/www.chenweikang.top\/?p=467\">\u57fa\u4e8eJquery\u5199\u7684\u4e00\u4e2a\u624b\u98ce\u7434\u6548\u679c\u7684\u6298\u53e0\u83dc\u5355<\/a><\/p><div class=\"__youshang\">\r\n            <div id=\"__youshang_popup\" class=\"wechat popup\" style=\"display: none;\">\r\n                <div class=\"head\">~\u8c22\u8c22\u6253\u8d4f~<\/div>\r\n                <div class=\"qrcode\"><div class=\"qrcode-li wechat\" ><img src=\"https:\/\/www.chenweikang.top\/wp-content\/uploads\/2019\/07\/wexin.png\" \/><\/div><div class=\"qrcode-li alipay\" style=\"display:none;\"><img src=\"https:\/\/www.chenweikang.top\/wp-content\/uploads\/2019\/07\/ali-pay.png\" \/><\/div><div class=\"qrcode-li hongbao\" style=\"display:none;\"><img src=\"https:\/\/www.chenweikang.top\/wp-content\/uploads\/2019\/07\/ali-hongbao.png\" \/><\/div><\/div>\r\n                <ul class=\"platform\"><li class=\"icon-wechat active\" data-bg-color=\"#05af4e\" data-thanks=\"~\u8c22\u8c22\u6253\u8d4f~\"><\/li><li class=\"icon-alipay \" data-bg-color=\"#00a2ea\" data-thanks=\"~\u8c22\u8c22\u6253\u8d4f~\"><\/li><li class=\"icon-hongbao \" data-bg-color=\"#dd5746\" data-thanks=\"<p>\u626b\u7801\u9886\u7ea2\u5305<\/p><p style='margin-top: 24px;'>\uff08\u4f59\u989d\u5b9d\u652f\u4ed8\u65f6\u53ef\u62b5\u73b0\uff09<\/p>\"><\/li><\/ul>\r\n            <\/div>\r\n            <a href=\"javascript:void(0);\" id=\"__youshang_btn\">\u8d4f<\/a>\r\n        <\/div>","protected":false},"excerpt":{"rendered":"<p>\u7531\u4e8e\u9879\u76ee\u4e2d\u5b50\u9875\u9762\u9700\u8981\u4e00\u4e2a\u5c0f\u83dc\u5355\uff0c\u627e\u4e00\u4e2a\u83dc\u5355\u63d2\u4ef6\u592a\u5927\u6750\u5c0f\u7528\uff0c\u53c8\u6015\u548c\u5f53\u524d\u9879\u76ee\u4e2d\u7684\u83dc\u5355\u4e0d\u517c\u5bb9\uff0c\u6240\u4ee5\u52a8\u624b\u81ea\u5df1\u5199\u4e86\u4e00\u4e2a\uff0c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,10],"tags":[50,49],"class_list":["post-467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-htmlcss","category-qianduan","tag-jquery","tag-minimenu"],"_links":{"self":[{"href":"https:\/\/www.chenweikang.top\/index.php?rest_route=\/wp\/v2\/posts\/467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chenweikang.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chenweikang.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chenweikang.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chenweikang.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=467"}],"version-history":[{"count":0,"href":"https:\/\/www.chenweikang.top\/index.php?rest_route=\/wp\/v2\/posts\/467\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.chenweikang.top\/index.php?rest_route=\/wp\/v2\/media\/469"}],"wp:attachment":[{"href":"https:\/\/www.chenweikang.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chenweikang.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chenweikang.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}