jQuery自定義手風琴，無法使其摺疊

Question

我有一個自定義手風琴，如jQuery UI手風琴。我也試圖讓任何擴展項目可摺疊（如果再次點擊）。像這樣的：https://jqueryui.com/accordion/#collapsible 但我無法弄清楚如何捕獲當前擴展項目上的另一個點擊事件。有人能指引我走向正確的方向嗎？

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

和我的jQuery是某事象下面這樣：

$(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; 
     }); 
    }); 
}); 

這裏是jsbin：http://jsbin.com/hazaxunuwa/edit?html,css,js,output

Answer 1

它不是一個好主意，用JavaScript來改變款式多多，而你能做的它只與CSS。當您的.dropdown處於活動狀態時，您應該只包含一個課程。下面是我已經感動了所有的樣式的CSS代碼示例：

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

避免在JavaScript styling，這將是一個不好的做法。

這裏是你想要的片段。

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

可替換地，通過利用.each()函數的index值的，當在一個標題的用戶點擊，我們循環通過內容陣列和用於我們使用的匹配項toggleClass()切換負責展開內容部分的.expand類，併爲每個不匹配的項目移除此類。

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>