JQuery slideToggle shoult slideUp all the other shown container
That's what sould happen:
I click on one of the menue items, the text container should slide down when i klick on an other the already opened container slide up and the clickt container slide down. but how i tried "siblings" but that doesnt worked the way i want it to.
and that's how far i already am
<style>
.read_more, .read_it, .read_that, .read_this{
color: black;
font-size: 20px;
font-weight:bold;
}
.inhalt, .inhalt_it, .inhalt_this, .inhalt_that{
display:none;
}
li{
display: inline;
list-style-type: none;
}
</style>
</head>
<body>
<a class="read_more">BTN 1</a>
<div class="inhalt">
text 1
</div>
<ul>
<li class="read_it">BTN 2</a></li>
<li class="read_that">BTN 3</a></li>
<li class="read_this">BTN 4</a></li>
</ul>
<div class="inhalt_it">
text 2
</div>
<div class="inhalt_that">
text 3
</div>
<div class="inhalt_this">
text 4
</div>
<script>
$('.read_more').click(function() {
$(this).nextAll('div.inhalt:first').slideToggle("slow").siblings('div.inhalt_it, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', '#F00F');
});
$('li.read_it').click(function(){
$(this).nextAll('div.inhalt_it:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', 'Yellow');
});
$('li.read_this').click(function(){
$(this).nextAll('div.inhalt_this:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_it, div.inhalt_that').slideUp('slow').css('background', 'Blue');
});
$('li.read_that').click(function(){
$(this).nextAll('div.inhalt_that:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_it, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', 'Red');
});
</script>
I tryed to to fixed the order problem like this
<script>
//
$('.read_it').click(function(){
$(this).siblings('div.inhalt, div.inhalt_prozesse, div.inhalt_recht').slideUp('slow', function(){
$(this).nextAll('div.inhalt_it:first').slideToggle("slow").css('background', 'Yellow');
});
//
</script>
How can I achieve that?!?
I already say thanks for any help.....I made it may be not in the most ellegent way but it works....
if any one could tell me how it can be improved i'll be very thank full...<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.inhalt, .inhalt1, .inhalt2, .inhalt3{
display: none;
}
.read1, .inhalt_1, .inhalt_2, .inhalt_3{
color: black;
font-size: 20px;
font-weight:bold;
}
ul{
display: inline;
开发者_JAVA技巧list-style-type: none;
}
li{
display: inline;
}
</style>
</head>
<body>
<a class="read1">BTN1</a>
<div class="inhalt">
content.<br />
</div>
<br />
<a class="inhalt_1">BTN2</a>
<a class="inhalt_2">BTN3</a>
<a class="inhalt_3">BTN4</a>
<div class="inhalt1">
Some content1.<br />
</div>
<div class="inhalt2">
Some content2.<br /><br />
</div>
<div class="inhalt3">
Some content3.<br />
</div>
<script>
$(document).ready(function(){
// BTN 1 begin
$('.read1').click(function(){
if ($('div.inhalt1').css('display') == 'block'){
$('div.inhalt1').slideUp('slow', (function(){
$('div.inhalt').slideToggle('slow')
}))
}
else if($('div.inhalt2').css('display') == 'block'){
$('div.inhalt2').slideUp('slow', (function(){
$('div.inhalt').slideToggle('slow')
}))
}
else if($('div.inhalt3').css('display') == 'block'){
$('div.inhalt3').slideUp('slow', (function(){
$('div.inhalt').slideToggle('slow')
}))
}
else{
$(this).nextAll('div.inhalt:first').slideToggle('slow');
}
});
// BTN 1 end
// BTN 2 begin
$('.inhalt_1').click(function(){
if ($('div.inhalt').css('display') == 'block'){
$('div.inhalt').slideUp('slow', (function(){
$('div.inhalt1').slideToggle('slow')
}))
}
else if($('div.inhalt2').css('display') == 'block'){
$('div.inhalt2').slideUp('slow', (function(){
$('div.inhalt1').slideToggle('slow')
}))
}
else if($('div.inhalt3').css('display') == 'block'){
$('div.inhalt3').slideUp('slow', (function(){
$('div.inhalt1').slideToggle('slow')
}))
}
else{
$(this).nextAll('div.inhalt1:nth(0)').slideToggle('slow');
}
});
// BTN 2 end
// BTN 3 begin
$('.inhalt_2').click(function(){
if ($('div.inhalt').css('display') == 'block'){
$('div.inhalt').slideUp('slow', (function(){
$('div.inhalt2').slideToggle('slow')
}))
}
else if($('div.inhalt1').css('display') == 'block'){
$('div.inhalt1').slideUp('slow', (function(){
$('div.inhalt2').slideToggle('slow')
}))
}
else if($('div.inhalt3').css('display') == 'block'){
$('div.inhalt3').slideUp('slow', (function(){
$('div.inhalt2').slideToggle('slow')
}))
}
else {
$(this).nextAll('div.inhalt2:first').slideToggle('slow');
}
})
// BTN 3 end
// BTN 4 begin
$('.inhalt_3').click(function(){
if ($('div.inhalt').css('display') == 'block'){
$('div.inhalt').slideUp('slow', (function(){
$('div.inhalt3').slideToggle('slow')
}))
}
else if($('div.inhalt1').css('display') == 'block'){
$('div.inhalt1').slideUp('slow', (function(){
$('div.inhalt3').slideToggle('slow')
}))
}
else if($('div.inhalt2').css('display') == 'block'){
$('div.inhalt2').slideUp('slow', (function(){
$('div.inhalt3').slideToggle('slow')
}))
}
else {
$(this).nextAll('div.inhalt3:first').slideToggle('slow');
}
})
// BTN 4 end
});
</script>
I know this is an old entry but I thought I post my answer anyway. Might help someone.
There are couple of things that could be improved with your code. First since it looks like all of your classes are unique, I suggest using IDs because they are faster.
Point your lis to their respective content by linking to their hash like so
<nav>
<li><a href="#Inhalt1">btn1</a></li>
</nav>
Then the JavaScript will hide your content and slideToggle the one you click
var content = ("#inhalt1, #inhalt2, #inhalt3");
$(content).hide();
$("nav a").click(function(e){
e.preventDefault();
$(content).hide();
$($(this).attr("href")).slideToggle();
Your script is not included in the jquery initialisation function. You should put all your script in:
$(function(){
// Put your code here
});
or
$(document).ready(function(){
// Put your code here
});
加载中,请稍侯......
精彩评论