I was able to get some simple code to work that allows me to show/hide using diffrent buttons for each action, but, I have six different divs that I want to apply this code too and only allow for one to appear at a time and if one is shown to hide it and display the new one. They will be at different places in my page.
我能够得到一些简单的代码,允许我使用不同的按钮显示/隐藏每个动作,但是,我有六个不同的div,我也想要应用这个代码,只允许一次出现一个如果显示一个隐藏它并显示新的。他们将在我的页面中的不同位置。
I know that I could just write individual code for each DIV, but I'm sure there's an easier way to do it.
我知道我可以为每个DIV编写单独的代码,但我确信有一种更简单的方法。
I tried a couple different methods, but it just gets messy. Thanks.
我尝试了几种不同的方法,但它只是变得混乱。谢谢。
Here's the JS:
这是JS:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".hide,.show").show();
$('.show').click(function() {
$(".slidingDiv").slideToggle();
$(".show").hide();
});
$('.hide').click(function() {
$(".slidingDiv").slideToggle();
$(".show").show();
});
});
Here's the CSS:
这是CSS:
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
Here's the HTML:
这是HTML:
<a href="#" class="show">Show</a>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="hide">Hide</a>
</div>
3 个解决方案
#1
1
Try this - DEMO
试试这个 - DEMO
$(document).ready(function() {
$('.show').click(function() { $(this).next().slideToggle(); });
$('.hide').click(function() { $(this).parent().slideUp(); });
});
#2
0
$(document).ready(function() {
$(".slidingDiv").hide();
$(".hide,.show").show();
$('.show').click(function() {
$(this).next(".slidingDiv").slideToggle();
$(this).hide();
});
$('.hide').click(function() {
$(this).parent().slideToggle();
$(this).parent().prev(".show").show();
});
});
some demo
#3
0
$(function() {
$(".slidingDiv").hide();
$(".hide, .show").show().on('click', function(e) {
var elm = $(e.target).is('.show') ? $(e.target) : $(e.target).parent().prev('.show');
elm.toggle().next(".slidingDiv").slideToggle()
});
});
#1
1
Try this - DEMO
试试这个 - DEMO
$(document).ready(function() {
$('.show').click(function() { $(this).next().slideToggle(); });
$('.hide').click(function() { $(this).parent().slideUp(); });
});
#2
0
$(document).ready(function() {
$(".slidingDiv").hide();
$(".hide,.show").show();
$('.show').click(function() {
$(this).next(".slidingDiv").slideToggle();
$(this).hide();
});
$('.hide').click(function() {
$(this).parent().slideToggle();
$(this).parent().prev(".show").show();
});
});
some demo
#3
0
$(function() {
$(".slidingDiv").hide();
$(".hide, .show").show().on('click', function(e) {
var elm = $(e.target).is('.show') ? $(e.target) : $(e.target).parent().prev('.show');
elm.toggle().next(".slidingDiv").slideToggle()
});
});