[英]jQuery sliding panels - close one panel when opening another one/How to open one panel only?
I have three sliding panels in my html. 我的html中有三个滑动面板。 The thing is that panels overlay each other when open.
问题是,打开时面板会彼此重叠。 I would like to get a function that create an event when one panel (eg. #panel1) is open already and the user will click on the other one (#panel2) then the first one (#panel1) will slide out so there can be only one panel open at a time.
我想获得一个函数,当一个面板(例如#panel1)已经打开并且用户将单击另一个面板(#panel2)时,该事件会创建一个事件,然后第一个面板(#panel1)将滑出,以便可以一次只能打开一个面板。
Anyone can help me with that?? 有人可以帮我吗?
Thanks in advance. 提前致谢。
HTML: HTML:
<ul id="menu">
<li><img id="icon_1" src="images/image1.png"></li>
<li><img id="icon_2" src="images/image2.png"></li>
<li><img id="icon_3" src="images/image3.png" ></li>
</ul>
<div id="panel1"></div>
<div id="panel2"></div>
<div id="top_panel"></div>
jQuery (#panel1 and #panel2 function taken from http://web.archive.org/web/20150227082803/http://www.jqeasy.com/jquery-slide-panel-plugin ): jQuery(#panel1和#panel2函数取自http://web.archive.org/web/20150227082803/http://www.jqeasy.com/jquery-slide-panel-plugin ):
$(document).ready(function(){
$('#panel1').slidePanel({
triggerName: '#icon_1',
speed: 'slow'
});
$('#panel2').slidePanel({
triggerName: '#icon_2',
speed: 'slow'
});
});
$(document).ready(function(){
$("#icon_3").click(function(){
$("#top_panel").slideToggle("slow");
});
});
Something in these lines. 这些行中的内容。 I would you data-* attributes to provide a relation between the panels and the images.
我希望您使用data- *属性来提供面板和图像之间的关系。 The follow up the logic based on the conditions.
根据条件跟踪逻辑。
Javascript Java脚本
$('#panel1').slidePanel({
speed: 'slow',
position: 'static'
});
$('#panel2').slidePanel({
speed: 'slow',
position: 'static'
});
$("[id^=icon]").click(function () {
// Current active panel
var $currPanel = $('#' + $(this).data('panel'));
// Slideup all the other panels other than $currPanel
$('.panel').not($currPanel).slideUp();
// If $currPanel has no active class only then slide down
if (!$currPanel.hasClass('current')) {
$currPanel.slideDown("slow");
}
// Add class active to current panel
$currPanel.addClass('current');
// Remove class for other panels
$('.panel').not($currPanel).removeClass('current');
});
HTML HTML
<ul id="menu">
<li>
<img id="icon_1" src="images/image1.png" data-panel="panel1">
</li>
<li>
<img id="icon_2" src="images/image2.png" data-panel="panel2">
</li>
<li>
<img id="icon_3" src="images/image3.png" data-panel="top_panel">
</li>
</ul>
<div id="panel1" class="panel"></div>
<div id="panel2" class="panel"></div>
<div id="top_panel" class="panel"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.