jQuery定制手风琴，无法让它折叠

时间：2016-08-01 14:52:34

标签： javascript jquery accordion

我有一个定制手风琴，比如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

3 个答案:

答案 0 :(得分：1)

使用JavaScript来改变很多样式并不是一个好主意，而你可以用css来做。您应该只在.dropdown处于活动状态时包含一个班级。下面是我将所有样式移动到css的示例代码：

＆＃13;
＆＃13; 
$(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');
        }
      });
   });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

在javascript中避免styling，这将是一种不好的做法。

以下是您想要的代码段。

＆＃13;
＆＃13; 
$(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;
      });
   });
});
＆＃13; 
.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;

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

或者，通过使用.each()函数的 index 值，当用户点击标题时，我们遍历内容数组并进行匹配我们使用toggleClass()来切换负责展开内容部分的类.expand，并为每个不匹配的项目移除此类。

jsFiddle

＆＃13;
＆＃13; 
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');
      }
    }
  });
});
＆＃13; 
.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; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题