问题：

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

申屠健

2023-03-14

我有一个自定义手风琴，像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，输出

共有3个答案

康秋月

2023-03-14

避免在javascript中使用样式，这将是一种不好的做法。

这是你想要的片段。

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

澹台华采

2023-03-14

或者，通过使用. each（）函数的index值，当用户单击标题时，我们循环遍历内容数组，对于匹配的项目，我们使用toggleClass（）来切换负责扩展内容部分的类.扩展，对于每个不匹配的项目，我们都会删除这个类。

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>

云正信

2023-03-14

使用JavaScript来更改许多样式并不是一个好主意，而您只需使用css即可。在<代码>中只应包含一个类。当它处于活动状态时，下拉列表。下面是我将所有样式移到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>

类似资料：

jQuery手风琴与href和可折叠

我正在使用href链接和可折叠标题制作手风琴菜单。问题是，当我单击子手风琴时，它会折叠父级。有什么解决方法吗？这是更新的版本，它正在工作。解决方案是使用“”（如@Renan Arajo所述）并删除手风琴上的标题设置。 https://codepen.io/CocoSkin/pen/vRQyZP
jQuery手风琴防止手风琴更改

我正在使用jQuery手风琴来隐藏一些数据。 accordion标题是一个带有一些标题的表格。有一个标题，我不希望你点击它，因为手风琴事件会触发。所以手风琴是可折叠的，如果您单击Test2（类nofunction），手风琴事件不应触发。但是如果您单击Test或其他表头，手风琴应该会触发事件。我可以添加这个功能吗？更新测试http://jsfiddle.net/e3Q8d/，包括jQuery
多个引导手风琴与折叠其他当点击一个手风琴

我尝试了以下代码，除了图标外，一切都很好。我试图在Google上找到一些解决方案，但我找不到我正在寻找的解决方案。当我点击其中一个手风琴时，另一个手风琴应该折叠，当前点击的手风琴应该打开，同时fa图标应该根据手风琴的位置而改变。这是我到目前为止已经尝试过的
手风琴布局／可折叠布局（Accordion / Collapsible）

手风琴布局Accordion Layout 通常，手风琴布局可以这样实现: <div class="accordion-list"> <div class="accordion-item"> <div class="accordion-item-toggle">...</div> <div class="accordion-item-content">...
手风琴

手风琴效果其实就是通过JS改变元素的height，然后加上transition来让css动起来。准备HTML结构这里我们使用 dl ，因为 dt 刚好可以模拟标题， dd 模拟内容。 <div class="panel"> <dl> <dt>One Item</dt> <dd>One Item Content .</dd>
jQuery制作效果超棒的手风琴折叠菜单

本文向大家介绍jQuery制作效果超棒的手风琴折叠菜单，包括了jQuery制作效果超棒的手风琴折叠菜单的使用技巧和注意事项，需要的朋友参考一下拉风的jQuery制作的手风琴折叠菜单，效果非常不错!这里是之前版本的改进版，主要是jquery代码改进演示图： main.js index.html style.css 以上所述就是本文给大家分享的全部内容了，希望能够对大家学习jQuery有所帮助。

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

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档