Masquer/afficher la bascule distincte divs avec le même nom de classe

J'ai une liste UL, chaque LI a un DIV caché, et "Plus d'infos" lien qui montre le caché DIV.
Cependant, en cliquant sur ce bouton, tous les autres LI cachés de DIVs ainsi.

Comment puis-je masquer/afficher la DIV dans le LI, et pas toutes les autres cachés DIV du spectacle?

Et si je clique sur un comment puis-je masquer les autres? J'aimerais garder cette partie distincte, quoique dans le cas où je veux l'enlever par la suite.

Également sur cliquez sur je veux que le texte dans la section "Plus d'infos" lien pour changer de "Cacher".

Voici mon script actuel:

$(window).load(function() {

$('.grey_button a').toggle(function() {
    $('.job_description').slideDown('');
    return false;
  },
    function() {
      $('.job_description').slideUp('');
    return false;
  });

});
InformationsquelleAutor JV10 | 2012-05-04
  1. 2

    La suite de jQuery devrait fonctionner:

    $('.grey_button a').toggle(function() {
    $(this).closest('li').find('.job_description').slideDown();
    return false;
  },
    function() {
      $(this).closest('li').find('.job_description').slideUp();
    return false;
  });

    Cela suppose HTML semblable à la suivante:

    <ul>
    <li><span class="grey_button"><a href="#">Show more information</a></span>
        <div class="job_description">Job information...</div></li>
    <!-- other list items... -->
</ul>

    JS Fiddle démo.

    D'ailleurs, il n'y a pas besoin de passer une chaîne vide à slideUp()/slideDown(), sans argument transmis (soit un entier (nombre de millisecons), ou une chaîne de caractères) d'une valeur par défaut sera utilisée à la place de 400 millisecondes.

    Références:

    • +1, bien qu'il ne ferme pas la d'autres (déjà ouvert), des si vous cliquez sur un lien.
    • Désolé, je suis en train d'utiliser ce code, mais le display: none et display: block est absent de la JS Fiddle, quelqu'un pourrait s'il vous plaît ajouter le code que j'ai besoin d'ajouter à la jQuery ci-dessus pour que cela fonctionne? Merci.
    InformationsquelleAutor David Thomas
  2. 2

    Jquery:

          $('.grey_button a').click(function() {
           $(this).closest('li').find('.job_description').slideToggle();

       });

    CSS emploi-information cachée d'abord:

         <ul>
       <li><span class="grey_button"><a href="#">Show more information</a></span>
      <div class="job_description" style="display:none" >Job information...</div></li>

    </ul>
    InformationsquelleAutor Learner_Programmer
  3. 1

    si la structure html est comme ceci ::

    <ul class="main">
   <li>
        <p class="important-info">Bala bala</p>
        <p class="more-info" style="display:none;">More bla bla</p>
        <a class="_show-more-info">More Information</a>
   </li>
   <li>
        <p class="important-info">Bala bala</p>
        <p class="more-info" style="display:none;">More bla bla</p>
        <a class="_show-more-info">More Information</a>
   </li>
<ul>

    Jquery Code pour votre condition sera comme ceci

    $('_show-more-info').click(function(){
    var thisAnchor = $(this);
    var ul = thisAnchor.parents('.main');
    ul.find('.more-info').slideUp();
    thisAnchor.sibling('.more-info').slideDown();
});
    InformationsquelleAutor Mayuresh
  4. 1

    Ce code ouvrira le contenu réel et masquer tous les autres:

    <style type="text/css">
.job_description { display: none; }
.grey_button.close span.hide,
.grey_button.open span.more { display: none; }
.grey_button.close span.more,
.grey_button.open span.hide { display: inline; }​
</style>
<script type="text/javascript" encoding="utf-8">
$(document).ready(function() {
$('.grey_button.close').live('click', function() {
$('.grey_button.open').click();
$('.job_description').slideUp();
$(this).siblings('.job_description').slideDown();
$(this).toggleClass('close open');
return false;
});
$('.grey_button.open').live('click', function() {
$('.job_description').slideUp();
$(this).toggleClass('close open');
return false;
});
});
</script>
<ul>
<li>short description
<a class="grey_button close" href="#">
<span class="more">read more</span>
<span class="hide">hide</span></a>
<div class="job_description">Here is more to read.</div>
</li>
<li>short description 
<a class="grey_button close" href="#">
<span class="more">read more</span>
<span class="hide">hide</span></a>
<div class="job_description">Here is more to read.</div>
</li>
<li>short description 
<a class="grey_button close" href="#">
<span class="more">read more</span>
<span class="hide">hide</span></a>
<div class="job_description">Here is more to read.</div>
</li>
<li>short description 
<a class="grey_button close" href="#">
<span class="more">read more</span>
<span class="hide">hide</span></a>
<div class="job_description">Here is more to read.</div>
</li>
</ul>​
    InformationsquelleAutor fragmentedreality
  5. 0

    Vous devez utiliser this contexte lors de l'accès à la li
    S'il vous plaît essayer

    $(window).load(function() {
$('.grey_button a').toggle(function() {
//hide the other 
$('.grey_button a').not($(this)).find('.job_description').each(function(){
$(this).slideUp();
})
$('.job_description',this).slideDown('');
return false;
},
function() {
$('.job_description',this).slideUp('');
return false;
});
});
    InformationsquelleAutor Sethunath
  6. 0

    appel .slideUp() sur la classe se cacher de tous, puis il suffit d'utiliser la $(this) mot-clé pour déclencher seulement la classe au sein de l' li.

    essayer:


    $('.grey_button a').toggle(function() {
    $('.job_description').slideUp();
    $(this).parent().find('.job_description').slideDown();
    return false;
    }

    InformationsquelleAutor ahren
  7. 0

    Essayez ceci:

    $(window).load(function() {
var $jobs = $('.job_description');
$('.grey_button a').click(function() {
$closest = $(this).closest('li').find('.job_description');
$jobs.not($closest).slideUp();
$closest.slideDown();
return false;
});
});
    InformationsquelleAutor Jack
  8. 0

    découvrez ce jsfiddle exemple ici.

    pour un coup d'oeil de jquery fuction ...à essayer : 

    $('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.bottom').hide();
$parent_box.find('.bottom').toggle();
});
    InformationsquelleAutor Rabin Naga