[英]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.