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>