javascript - jQuery 自定义 Accordion ，无法使其可折叠

Question

我有一个自定义 Accordion ，例如 jQuery UI Accordion 。我还试图使任何展开的项目可折叠(如果再次单击)。像这样的: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>