jquery - 如何通过使用委托(delegate)展开和折叠父项和子项来使用 jquery 创建自定义 Accordion

Question

我有一些带有 parent 和 child 类(class)的 ul li 标签，我需要把它做成 Accordion ，如果我点击状态，所有州的 child 都应该再次展开当我点击大写时，所有大写的 child 都应该展开，所有的国家的 child 应该崩溃。我已经试过了，但它不能单独工作，任何人都可以帮助我，它只需要用委托(delegate)方法来制作。

$(document).ready(function(){
  $(".childs").hide();
  
  $(".collapse").delegate(".parents", "click", function(){
    $(".childs").show();	
  });  
});

ul li{list-style-type:none;}
.parents{cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse">
  <ul>
    <li class="parents">States</li>
    <li>
      <ul class="childs">
        <li><a>states 1</a></li>
        <li><a>states 2</a></li>
        <li><a>states 3</a></li>
      </ul>
    </li>
    <li class="parents">Capitals</li>
    <li>
      <ul class="childs">
        <li><a>Capital 1</a></li>
        <li><a>Capital 2</a></li>
        <li><a>Capital 3</a></li>
      </ul>
    </li>
  </ul>
</div>
    

Answer 1

您可能知道 .delegate() 在 jQuery 3.0 中已被弃用。

代替 $(".childs").show() 使用 $(".childs").hide(); 和 $(this ).next().find(".childs").show(); 行。这将解决您的问题。

$(document).ready(function(){
$(".childs").hide();
 $(".collapse").delegate(".parents", "click", function(){
    if($(this).next().find(".childs").is(":hidden")){
     $(".parents").not(this).find(".collapseExpand").removeClass("minus").addClass("plus");
    	$(".childs").hide();
			$(this).next().find(".childs").show();
    }else{
			$(this).next().find(".childs").hide();
    }
    $(this).find(".collapseExpand").toggleClass("plus, minus");
});  
});

ul li{list-style-type:none;}
.parents{cursor:pointer;}
.plus::before{
content:"+";
}
.minus::before{
content:"-";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse">
  <ul>
    <li class="parents"><span class="plus collapseExpand"></span> States</li>
    <li>
      <ul class="childs">
        <li><a>states 1</a></li>
        <li><a>states 2</a></li>
        <li><a>states 3</a></li>
      </ul>
    </li>
    <li class="parents"><span class="plus collapseExpand"></span> Capitals</li>
    <li>
      <ul class="childs">
        <li><a>Capital 1</a></li>
        <li><a>Capital 2</a></li>
        <li><a>Capital 3</a></li>
      </ul>
    </li>
  </ul>
</div>

您也可以在这里进行测试.. https://jsfiddle.net/nimittshah/zys3t6ck/1/

更新 1:添加了加号 (+) 减号 (-)。

更新 2:在打开的元素点击时添加了关闭功能。

https://jsfiddle.net/nimittshah/zys3t6ck/4/