Question

我正在尝试使用以下jquery代码通过折叠按钮创建可折叠列表，但无法正常工作。

<html>
  <body>
    <ul>
      <button class = 'collapse'>+</button>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
    </ul>
  </body>
</html>

JQuery代码：

$(document).ready(function(){
  $('ul').on('click','.collapse', function(e){
       e.stopPropagation();
       $(this).children('li').toggle();
   });
});

我添加的切换按钮根本不起作用，请你帮忙... 谢谢

Answer 1

示例：

$(function() {
  $('.collapse').on("click", function(e) {
    e.stopPropagation();
    if ($(this).hasClass("collapsed")) {
      $(this)
        .removeClass("collapsed")
        .attr("title", "Collapse List")
        .html("-");
    } else {
      $(this)
        .addClass("collapsed")
        .attr("title", "Expand List")
        .html("+");
    }
    var t = $(this).data("target");
    $("." + t).children("li").toggleClass("hide");
  });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='collapse' data-target="list-1" title="Collapse List">-</button>
<ul class="list-1">
  <li>line 1</li>
  <li>line 2</li>
  <li>line 3</li>
</ul>

在<button>中包含<ul>元素是不正确的语法。该脚本将根据按钮的类检查列表的当前状态。如果折叠，它将展开列表并将标题和值从“ +”更改为“-”。反之亦然，它将折叠列表。

如果您想使用.toggle()，可以这样做：

$(function() {
  $('.collapse').on("click", function(e) {
    e.stopPropagation();
    if ($(this).hasClass("collapsed")) {
      $(this)
        .removeClass("collapsed")
        .attr("title", "Collapse List")
        .html("-");
    } else {
      $(this)
        .addClass("collapsed")
        .attr("title", "Expand List")
        .html("+");
    }
    var t = $(this).data("target");
    $("." + t).toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='collapse' data-target="list-1" title="Collapse List">-</button>
<ul class="list-1">
  <li>line 1</li>
  <li>line 2</li>
  <li>line 3</li>
</ul>

希望有帮助。

Answer 2

您可以隐藏/显示下一个ul

$(function() {
  $('.collapse').on("click", function(e) {
    let className=$(this).attr('class');
    if(className=='collapse'){
  
      $(this).attr('title',"Expand");
      $(this).attr('class',"expand");
      $(this).next('ul').hide();
      $(this).html('+');
    }
    else{
    $(this).attr('title',"Collapse");
    $(this).attr('class',"collapse");
    $(this).next('ul').show();
    $(this).html('-');
    }
    
    
   });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='collapse' data-target="list-1" title="Collapse List">-</button>
<ul class="list-1">
  <li>line 1</li>
  <li>line 2</li>
  <li>line 3</li>
</ul>

Answer 3

谢谢大家的帮助，我找到了一个简单的解决方案，它非常有效：

$(document).ready(function(){
   $(.toggler).click(function(){
      $(this).parent('ul').children('li').toggle();
     });
 });

并获得更好的外观和功能：

$(document).ready(function(){
  $('.toggler').click(function(){
    var tick = $(this).text();
    if(tick == '+'){
        $(this).parent('ul').children('li').show();
        $(this).text('-');
       }
    else{
        $(this).parent('ul').children('li').hide();
        $(this).text('+');
        }
    });
});

将折叠按钮添加到列表

3 个答案: