jQuery benutzerdefinierte Akkordeon, konnte nicht zusammenklappbar

Question

Ich habe eine benutzerdefinierte Akkordeon, wie jQuery UI Akkordeon. Ich versuche auch, jeden erweiterten Gegenstand zusammenklappbar zu machen (wenn er erneut angeklickt wird). Etwas wie dieses: https://jqueryui.com/accordion/#collapsible Ich bin jedoch nicht in der Lage, herauszufinden, wie man ein anderes Klickenereignis auf dem aktuell ausgedehnten Einzelteil gefangennimmt. Kann mir jemand in die richtige Richtung zeigen?

<div class="dropdown"> 
     <div class="style1 dropdown-link" style='background-color: rgb(75, 78, 80);'>Timecard Error Message</div> 
     <div class="style2 dropdown-container" style="display: none"> 
      <div class="ExternalClassA37E015771DB4A43AFAA85E21F07E758"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! 
</p> 
      </div> 
     </div> 
    </div> 
    <div class="dropdown"> 
     <div class="style1 dropdown-link" style="background-color: rgb(84, 88, 90);">Worklist Emails</div> 
     <div class="style2 dropdown-container" style="display: none;"> 
      <div class="ExternalClassA7D39E7BCBCE48A791E0F84E3631CC00"> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! 

      </div> 
     </div> 
    </div> 

und meine jQuery ist etw wie unten:

$(document).ready(function(){ 
    $('div.dropdown').each(function() { 
     var $dropdown = $(this);  
     $(".dropdown-link", $dropdown).click(function(e) { 
     e.preventDefault(); 
     $("div.dropdown-link").css('background-image',''); //reset the background so CSS Background takes over 
     $("div.dropdown-container").css('display','none'); 
     $("div.dropdown-link").css('background-color','#54585a'); 
     $("div.dropdown-link").css('border','none'); 
      if($("div.dropdown-container", $dropdown).css('display','none')){ 
       $("div.dropdown-link", $dropdown).css('background-color','#4b4e50'); 
       $("div.dropdown-link", $dropdown).css({'border-bottom':'1px dotted white', 'border-top':'1px dotted white'}); 
       $("div.dropdown-container", $dropdown).css('display','inline-block'); 
       $("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/arrowdown.png")'); 
      }else{ 
       $("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/img/arrow.png")'); 
       $("div.dropdown-container", $dropdown).css('display','none'); 
       $("div.dropdown-link", $dropdown).css('background-color','#54585a'); 
       $("div.dropdown-link", $dropdown).css('border', 'none'); 
      } 
     return false; 
     }); 
    }); 
}); 

ist die jsbin: http://jsbin.com/hazaxunuwa/edit?html,css,js,output

Answer 1

Es ist nicht eine gute Idee zu verwenden JavaScript für viele Arten zu ändern, während Sie tun können es mit nur CSS. Sie sollten nur eine Klasse in Ihre .dropdown einschließen, wenn sie aktiv ist. Unten ist der Beispielcode, wo ich alle Stile CSS verschoben haben:

$(document).ready(function(){ 
 
    $('div.dropdown').each(function() { 
 
     var $dropdown = $(this); 
 
     var $dropdownLink = $dropdown.find('.dropdown-link'); 
 
     
 
     $dropdownLink.click(function(e) { 
 
     e.preventDefault(); 
 
     var currentBlock = $(this).closest('.dropdown'); 
 
     
 
     if(currentBlock.hasClass('slide-active')) { 
 
      currentBlock.removeClass('slide-active'); 
 
     } else { 
 
      $('div.dropdown').removeClass('slide-active'); 
 
      currentBlock.addClass('slide-active'); 
 
     } 
 
     }); 
 
    }); 
 
});

.dropdown-link { 
 
    background: #54585a; 
 
} 
 
.dropdown-container { 
 
    display: none; 
 
} 
 

 
.slide-active .dropdown-container { 
 
    display: block; 
 
} 
 

 
.slide-active .dropdown-link { 
 
    border-bottom: 1px dotted white; 
 
    background: #4b4e50; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
    <div class="style1 dropdown-link">Timecard Error Message</div> 
 
    <div class="style2 dropdown-container"> 
 
    <div class="ExternalClassA37E015771DB4A43AFAA85E21F07E758"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <div class="style1 dropdown-link">Worklist Emails</div> 
 
    <div class="style2 dropdown-container"> 
 
    <div class="ExternalClassA7D39E7BCBCE48A791E0F84E3631CC00"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<div class="dropdown"> 
 
    <div class="style1 dropdown-link">Unable to Enter a Future Timecard</div> 
 
    <div class="style2 dropdown-container"> 
 
    <div class="ExternalClassD8605E4C12364C5685331D8368E84E8A"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 2

styling in Javascript vermeiden, wäre es eine schlechte Praxis.

Hier ist die Schnipsel von was Sie wollen.

$(document).ready(function(){ 
 
    $('div.dropdown').each(function() { 
 
     var $dropdown = $(this);  
 
     $(".dropdown-link", $dropdown).click(function(e) { 
 
     e.preventDefault(); 
 
     var parent_drop = $(this).closest(".dropdown"); 
 
     if($(parent_drop).is(".open")){ 
 
      $(parent_drop).removeClass("open"); 
 
      $("div.dropdown-container").css('display','none'); 
 
     } else { 
 
      $(parent_drop).addClass("open"); 
 
      $("div.dropdown-link").css('background-image',''); //reset the background so CSS Background takes over 
 
     $("div.dropdown-container").css('display','none'); 
 
     $("div.dropdown-link").css('background-color','#54585a'); 
 
     $("div.dropdown-link").css('border','none'); 
 
      if($("div.dropdown-container", $dropdown).css('display','none')){ 
 
       $("div.dropdown-link", $dropdown).css('background-color','#4b4e50'); 
 
       $("div.dropdown-link", $dropdown).css({'border-bottom':'1px dotted white', 'border-top':'1px dotted white'}); 
 
       $("div.dropdown-container", $dropdown).css('display','inline-block'); 
 
       $("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/arrowdown.png")'); 
 
      }else{ 
 
       $("div.dropdown-link", $dropdown).css('background-image','url("/SiteAssets/img/arrow.png")'); 
 
       $("div.dropdown-container", $dropdown).css('display','none'); 
 
       $("div.dropdown-link", $dropdown).css('background-color','#54585a'); 
 
       $("div.dropdown-link", $dropdown).css('border', 'none'); 
 
      } 
 
     } 
 
     
 
     
 
     return false; 
 
     }); 
 
    }); 
 
});

.style1 { 
 
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif; 
 
    font-size: 13px; 
 
    color: #fff; line-height:22px; cursor: pointer; background-color:#5d6264; padding-left:3px; margin-left:5px; 
 
    background: url('/SiteAssets/img/gt2.png') no-repeat center left; 
 
    background-size:12px 12px; 
 
    padding-left: 15px; 
 
} 
 

 
.style2 { 
 
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif; 
 
    font-size: 13px; 
 
    border-bottom:1px dotted silver; 
 
    padding:0px 5px 5px 15px; margin-left:5px; background-color:#606567; color:#fff; display:none; 
 
} 
 
.style2 a{color: white !important; text-decoration:underline !important;} 
 

 
.style3{ 
 
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif; 
 
    font-size: 13px; font-weight:bold; color:#fff; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
     <div class="style1 dropdown-link" style='background-color: rgb(75, 78, 80);'>Timecard Error Message</div> 
 
     <div class="style2 dropdown-container" style="display: none"> 
 
      <div class="ExternalClassA37E015771DB4A43AFAA85E21F07E758"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! 
 
</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="dropdown"> 
 
     <div class="style1 dropdown-link" style="background-color: rgb(84, 88, 90);">Worklist Emails</div> 
 
     <div class="style2 dropdown-container" style="display: none;"> 
 
      <div class="ExternalClassA7D39E7BCBCE48A791E0F84E3631CC00"> 
 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque sapiente beatae eum repudiandae aliquam possimus delectus veritatis numquam sit eaque esse quos ipsa, pariatur omnis obcaecati quibusdam dolore magnam! 
 

 
      </div> 
 
     </div> 
 
    </div>

Answer 3

Alternativ kann durch die Verwendung des index Wert der .each() Funktion Herstellung, klickt der Benutzer auf einen Titel, wir eine Schleife durch den Inhalt-Array und für den passenden Eintrag verwenden wir toggleClass(), um die Klasse .expand umzuschalten, die für die Erweiterung des Inhaltsbereichs verantwortlich ist, und für jedes nicht übereinstimmende Element entfernen wir diese Klasse.

jsFiddle

var titles = $('.title'), 
 
    content = $('.content'); 
 

 
titles.each(function(index) { 
 
    $(this).on('click', function() { 
 
    for (var i = 0; i < content.length; ++i) { 
 
     if (i == index) { 
 
     $(content[i]).toggleClass('expand'); 
 
     } else { 
 
     $(content[i]).removeClass('expand'); 
 
     } 
 
    } 
 
    }); 
 
});

.accord { width: 500px; outline: 1px solid #aaa; } 
 
.title { color: white; background-color: #555; padding: 10px 5px; cursor: pointer; } 
 
.content { max-height: 1px; overflow: hidden; } 
 
.expand { max-height: 1000px; padding: 5px 5px 20px 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="accord"> 
 
    <div class="title">This is title ONE</div> 
 
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus debitis, ipsum at asperiores dignissimos aperiam qui. Dignissimos mollitia incidunt commodi, necessitatibus numquam corporis, ex expedita ut consequatur maiores doloremque eius. 
 
    </div> 
 
    <div class="title">This is title TWO</div> 
 
    <div class="content">Cake gummies candy canes topping donut caramels candy bear claw. Powder brownie chupa chups macaroon jelly beans chocolate chocolate jelly. Chupa chups apple pie marshmallow dessert tart apple pie cotton candy tiramisu. Fruitcake cupcake pie. Cheesecake 
 
    bear claw croissant candy tart. Liquorice cookie candy topping macaroon. 
 
    </div> 
 
    <div class="title">And here's title THREE</div> 
 
    <div class="content">Percolator, spoon half and half variety saucer caramelization qui milk. Sugar aromatic white at skinny roast redeye decaffeinated shop. Siphon spoon id, robust froth doppio redeye café au lait. So aroma, a grinder crema froth acerbic. Cultivar ristretto 
 
    carajillo turkish galão cappuccino, roast to go black body milk. Est decaffeinated seasonal coffee robust, qui sit french press single shot single origin. 
 
    </div> 
 
</div>