显示切换隐藏其他div jquery
我有2个链接，都显示不同的div。 我已经让它滑动了所有罚款。 但我需要它做的是折叠相反的切换（如果它打开）。 与手风琴面板的工作方式类似（当您触发显示切换链接时，打开的面板关闭，新触发的面板打开）。
这是我目前正在使用的jQuery
//Left reveal toggle $(".left-reveal-toggle").on("click", function () { $('.left-reveal-section').slideToggle("slow"); $(".left-reveal-toggle").toggleClass("active"); }); //Right reveal toggle $(".right-reveal-toggle").on("click", function () { $('.right-reveal-section').slideToggle("slow"); $(".right-reveal-toggle").toggleClass("active"); }); 这是一个有效的JSFiddle链接： http ： //jsfiddle.net/wq73aeuh/1/
//Left reveal toggle $(".left-reveal-toggle").on("click", function() { $('.left-reveal-section').slideToggle("slow"); $(".left-reveal-toggle").toggleClass("active"); }); //Right reveal toggle $(".right-reveal-toggle").on("click", function() { $('.right-reveal-section').slideToggle("slow"); $(".right-reveal-toggle").toggleClass("active"); });
.left-panel { min-height: 400px; background: #31b9ce; width: 50%; float: left; text-align: center; } .right-panel { min-height: 400px; background: #4f5cd6; width: 50%; float: left; text-align: center; } .left-panel-reveal { min-height: 400px; background: #31b9ce; width: 50%; float: left; text-align: center; } .right-panel-reveal { min-height: 400px; background: #4f5cd6; width: 50%; float: left; text-align: center; } .hide { display: none; } .clear { clear: both; font-size: 0px; line-height: 0px; display: block; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
在右边的函数顶部使用：$（’。left-reveal-section’）。slideUp（’slow’）; 左边的函数顶部：$（’。right-reveal-section’）。slideUp（’slow’）;