JQuery slideToggle shoult slideUp tout l'autre récipient montré

C'est ce Sould arriver:JQuery slideToggle shoult slideUp tout l'autre récipient montré

je clique sur l'un des éléments menue, le conteneur de texte devrait glisser vers le bas quand je Klick sur une autre la lame de récipient déjà ouvert et clickt conteneur glisser vers le bas. mais comment j'ai essayé "frères et sœurs" mais cela n'a pas fonctionné comme je le veux.

et c'est à quel point je suis déjà

<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>

Je tryed à résolu le problème de l'ordre comme celui-ci

 <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>

Comment puis-je obtenir cela?!?
Je dis déjà merci pour toute aide .....

Je l'ai fait peut-être pas la manière la plus ellegent mais ça marche ....
si quelqu'un pourrait me dire comment il peut être amélioré i » ll sera très merci pleine ...

<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; 
      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>

Source

2010-07-27 zim

J'ai créé un jsFiddle ici: http://jsfiddle.net/jn2Yb/. Est-ce ainsi que le BTN devrait ressembler? Si non, comment devraient-ils regarder et que devraient-ils faire exactement? – MvanGeest

Hy MvanGeest l'apparence des BTN est juste et BTN 1 agissent bien. Ce que les BTN devraient faire est quand je clique sur l'un d'eux le contenu d'opend devrait glisser vers le haut et quand c'est fait le contenu de clickt devrait glisser vers le bas ..... – zim

Mais pourquoi les 2,3,4 du BTN l'un à côté de l'autre? Cela détruit complètement l'effet de glissement (à mon avis). Ils sont aussi en ligne, donc ça ne marchera pas ... Je ne pense pas comprendre le contenu qui va où. Est-ce que le contenu de BTN 2 va dans la même zone visible que, disons, BTN 1? – MvanGeest

Votre script n'est pas inclus dans la fonction d'initialisation jquery. Vous devez mettre tout votre script dans:

$(function(){ 
// Put your code here 
});

$(document).ready(function(){ 
// Put your code here 
});

Source

2010-07-27 14:44:05 Shaoz

hy Shaoz ce n'est pas le problème que le script fonctionne, mais pas la façon dont je le veux ... – zim

Je sais que c'est une ancienne entrée mais je pensais que je poste ma réponse de toute façon. Pourrait aider quelqu'un.

Il y a plusieurs choses qui pourraient être améliorées avec votre code. Tout d'abord, il semblerait que tous vos cours soient uniques. Je suggère d'utiliser des identifiants car ils sont plus rapides.

point vos lis à leur contenu respectif en liant à leur hachage comme si

<nav> 
    <li><a href="#Inhalt1">btn1</a></li> 
</nav>

Alors le JavaScript cachera votre contenu et slideToggle celui que vous cliquez sur

var content = ("#inhalt1, #inhalt2, #inhalt3"); 
    $(content).hide(); 
    $("nav a").click(function(e){ 
    e.preventDefault(); 
    $(content).hide(); 
    $($(this).attr("href")).slideToggle();

Source

2011-05-12 05:38:02

JQuery slideToggle shoult slideUp tout l'autre récipient montré

Répondre

Questions connexes