JQUERY遍历问题

Question

HTML结构如下

<div class="box">
    <div class="item-list">
        <div class="list-header">标题 1<i>展开</i></div>
        <div class="list-content hide">内容 1</div>
    </div>
    <!--N个-->
    <div class="item-list">
        <div class="list-header">标题 n<i>展开</i></div>
        <div class="list-content hide">内容 n</div>
    </div>
</div>

默认list-content隐藏，如何点击标题使list-content显示，<i>展开</i>里文字切换成关闭呢？并且点击下一个隐藏上一个内容，并把<i>关闭</i>切换成<i>展开</i>。求解，非常感谢...

Answer 1

$('.box').on('click','.list-header',function(){
        $('.list-content:not(.hide)').prev().find('i').text('展开');
        $('.list-content:not(.hide)').addClass('hide');
        $(this).find('i').text('关闭');
        $(this).siblings().removeClass('hide');
});

Answer 2

我之前的是这样子的 ,定义一个变量 如 openIds =new Set(), 然后点击的时候就判断,如果 里面has (Id),就delete ,没有就add;

控制展开与关闭的时候 判断openIds 这个变量有没有 那一条点击的id 有的话就展开 没有的话 就关闭

Answer 3

这个是解决思路的问题，建议自己想解决方案

1. 事件应该加在什么地方
2. 点击触发事件之后，找到判定依据，根据这个判定点来决定下面应该怎么处理
3. 如果jquery不会用，就多看api

你可以尝试回答问题的方式，解决这个问题，找到核心问题点