[英]jQuery click/toggle reveal / hide div panels
我试图单击显示并使用jQuery隐藏一些div。 我几乎可以正常工作,我需要一点帮助。
这是到目前为止我得到的: jsfiddle
$(document).ready(function() {
$('#showmenu1').click(function() {
$('.menu1').fadeToggle("fast");
$('.menu2').hide();
$('.menu3').hide();
$('#showmenu2').hide();
$('#showmenu3').hide();
$(this).toggleClass('close');
});
$('#showmenu2').click(function() {
$('.menu2').fadeToggle("fast");
$('.menu1').hide();
$('.menu3').hide();
$('#showmenu1').hide();
$('#showmenu3').hide();
$(this).toggleClass('close');
});
$('#showmenu3').click(function() {
$('.menu3').fadeToggle("fast");
$('.menu1').hide();
$('.menu2').hide();
$('#showmenu1').hide();
$('#showmenu2').hide();
$(this).toggleClass('close');
});
});
效果很好,但是如果您单击“链接1”,“链接2”和“链接3”中的任何一个链接,它将显示正确的揭示div并隐藏其他2个链接(这是正确的)。 然后,我需要做的是,如果您单击显示隐藏的同一个“链接”面板,但是我还需要其他2个链接面板重新出现。 在那一刻,他们保持隐藏。
谢谢
这是我的方法:
$(document).ready(function() {
$('#showmenu1').click(function() {
$('.menu1').fadeToggle("fast");
$('#showmenu2').toggle();
$('#showmenu3').toggle();
$(this).toggleClass('close');
});
$('#showmenu2').click(function() {
$('.menu2').fadeToggle("fast");
$('#showmenu1').toggle();
$('#showmenu3').toggle();
$(this).toggleClass('close');
});
$('#showmenu3').click(function() {
$('.menu3').fadeToggle("fast");
$('#showmenu1').toggle();
$('#showmenu2').toggle();
$(this).toggleClass('close');
});
});
这是JSFiddle演示 :)
使用toggle()
而不是hide()
,当它们不涉及其他菜单时,您不必处理它们:)
也许切换而不是隐藏其他选项:
$(document).ready(function() {
$('#showmenu1').click(function() {
$('.menu1').fadeToggle("fast");
$('.menu2').hide();
$('.menu3').hide();
$('#showmenu2').toggle();
$('#showmenu3').toggle();
$(this).toggleClass('close');
});
$('#showmenu2').click(function() {
$('.menu2').fadeToggle("fast");
$('.menu1').hide();
$('.menu3').hide();
$('#showmenu1').toggle();
$('#showmenu3').toggle();
$(this).toggleClass('close');
});
$('#showmenu3').click(function() {
$('.menu3').fadeToggle("fast");
$('.menu1').hide();
$('.menu2').hide();
$('#showmenu1').toggle();
$('#showmenu2').toggle();
$(this).toggleClass('close');
});
});
请检查更新的小提琴: http : //jsfiddle.net/rzw9fzz2/2/
$(document).ready(function() {
$('#showmenu1').click(function() {
$('.menu1').fadeToggle("fast");
$('.menu2').hide();
$('.menu3').hide();
$('#showmenu2').toggle();
$('#showmenu3').toggle();
$(this).toggleClass('close');
});
$('#showmenu2').click(function() {
$('.menu2').fadeToggle("fast");
$('.menu1').hide();
$('.menu3').hide();
$('#showmenu1').toggle();
$('#showmenu3').toggle();
$(this).toggleClass('close');
});
$('#showmenu3').click(function() {
$('.menu3').fadeToggle("fast");
$('.menu1').hide();
$('.menu2').hide();
$('#showmenu1').toggle();
$('#showmenu2').toggle();
$(this).toggleClass('close');
});
});
我修改了一点您的代码。 您可能会发现它有用:
HTML:
<div id="showmenu1" class="panel">Link 1</div>
<div id="showmenu2" class="panel">Link 2</div>
<div id="showmenu3" class="panel">Link 3</div>
<div class="menu1">Link 1 reveal content</div>
<div class="menu2">Link 2 reveal content</div>
<div class="menu3">Link 3 reveal content</div>
CSS:
.panel{width:150px;float:left;padding:50px;cursor:pointer;}
#showmenu1{background:#ffff00;}
#showmenu2{background:#ff0000;}
#showmenu3{background:#fAAA00;}
.menu1, .menu2, .menu3{float:left;background:#000;color:#fff;padding:50px; opacity: 0; display: none}
.hide-showmenu {
display: none;
}
.display-menu {
display: block;
}
.transition-menu {
transition: opacity 0.5s linear;
opacity: 1;
}
JS:
$(document).ready(function() {
$('#showmenu1').click(function() {
$('.menu1').toggleClass("display-menu");
setTimeout(function() {
$('.menu1').toggleClass("transition-menu");
});
$("#showmenu2, #showmenu3, .menu2, .menu3").toggleClass("hide-showmenu");
$(this).toggleClass('close');
});
$('#showmenu2').click(function() {
$('.menu2').toggleClass("display-menu");
setTimeout(function() {
$('.menu2').toggleClass("transition-menu");
});
$("#showmenu1, #showmenu3, .menu1, .menu3").toggleClass("hide-showmenu");
$(this).toggleClass('close');
});
$('#showmenu3').click(function() {
$('.menu3').toggleClass("display-menu");
setTimeout(function() {
$('.menu3').toggleClass("transition-menu");
});
$("#showmenu1, #showmenu2, .menu1, .menu2").toggleClass("hide-showmenu");
$(this).toggleClass('close');
});
});
在这里提琴: http : //jsfiddle.net/rzw9fzz2/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.