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 处于活动状态时，您应该只在 .dropdown 中包含一个 class。下面是我将所有样式移动到 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() function, when the user clicks on a title, we loop through the content array and for the matching item we use toggleClass() 的 index 值来切换 class .expand 即负责扩展内容部分，对于每个不匹配的项目，我们删除这个 class.

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>

jQuery 自定义手风琴，无法折叠

jQuery custom accordion, couldn't make it collapsible

javascript

jquery

accordion