Ein - /ausblenden Umschalten separate divs mit der gleichen Klasse Namen

Ich habe eine UL-Liste, jeder LI hat einen versteckten DIV, und ein "Mehr info" - link, zeigt das versteckte DIV.
Aber, ein Klick auf diese Schaltfläche zeigt all die anderen LI ' s hidden DIVs als gut.

Wie kann ich nur ein - /ausblenden des DIV in LI, und nicht all die anderen versteckte DIV ' s show?

Und wenn ich auf eine wie kann ich die anderen auszublenden? Ich möchte zu halten, dieses Teil zu trennen, obwohl, falls ich es entfernen möchten später.

Auch auf Sie auf ich möchte den text in der "Mehr info" - link, um ändern zu "Verstecken".

Hier ist mein Aktuelles script:

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

    Den folgenden jQuery funktionieren sollte:

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

    Dies setzt Voraus, ähnlich dem folgenden HTML:

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

    Übrigens, es gibt keine Notwendigkeit, übergibt einen leeren string zu slideUp()/slideDown(), ohne ein argument zu übergeben (entweder eine ganze Zahl (Anzahl in millisecons), oder einen string) default-Wert wird stattdessen verwendet, von 400 Millisekunden.

    Referenzen:

    +1 obwohl es schließt nicht die anderen (bereits geöffneten), wenn Sie auf einen link klicken.
    Sorry, ich versuche, um diesen code zu verwenden, aber das display: none und display: block fehlt aus dem JS Fiddle, könnte mir bitte jemand den code hinzufügen muss ich hinzufügen, um die jQuery-oben für diese arbeiten? Danke.

    InformationsquelleAutor David Thomas

  2. 2

    Jquery:

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

       });

    CSS machen job-Informationen ausgeblendet zunächst:

         <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

    wenn die html-Struktur ist wie folgt ::

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

    dann Jquery-Code für Ihre Anforderung wie diese

    $('_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

    Dieser code öffnet die eigentlichen Inhalte und alle anderen auszublenden:

    <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

    Sollten Sie verwenden this Kontext beim Zugriff auf die li
    Bitte versuchen Sie

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

    aufrufen .slideUp() auf die Klasse verstecken Sie alle, und dann verwenden Sie einfach die $(this) Schlüsselwort trigger nur die Klasse in der li.

    versuchen:


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

    InformationsquelleAutor ahren

  7. 0

    Versuchen Sie dies:

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

    schauen Sie sich dieses jsfiddle Beispiel hier.

    einen Blick von jquery fuction ...versuchen : 

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

    InformationsquelleAutor Rabin Naga

Schreibe einen Kommentar