javascript - 完成 Accordion jQuery 功能，我尝试了很多，似乎没有任何效果？

Question

我就开门见山吧，我正在尝试完成这个 Accordion 效果(当你打开一个时，其他的关闭)， Accordion 上大约有7个属性。每个都有一个加号，所以当你打开它时，它应该变成一个减号(通过 Font Awesome，这部分我可以处理，只是为了上下文)。

HTML <a>包含 + 符号图标和 ul.checkbox-list需要监控它是否有 active类，这样它就可以崩溃其他类。我已经有点接近了，但随后发生了其他事情，我想也许另一双眼睛可以提供帮助？

    $(document).ready(function(){
        
        $("a[id^='attr']").on("click", function() {

            if( $(this + "ul.checkbox-list").hasClass("visible") ) {
                // Got lost as to what to do here ..
            } else {
                $("a[id^='attr'] > i").removeClass("fa-plus-circle").addClass("fa-minus-circle");
                $("ul.checkbox-list").removeClass("active");
                $(this).addClass("active");
                $("ul.checkbox-list").slideUp(200);
                $(this).siblings().slideDown("slow");
            }

        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
        <section>
            <ul id="att7">
                <li>
                    <a href="#" id="attr7"><i class="fas fa-plus-circle"> </i> Lumens</a>
                    <ul class="checkbox-list">
                        <li style="display: flex; flex-direction: row;"> 
                            <div class="roundedTwo" style="">
                            <p>Aged Brass</p>
                            <input type="checkbox" value="None" id="roundedTwo" name="check" checked="">
                            <label for="roundedTwo"></label>
                            </div>
                        </li>
                        <li style="display: flex; flex-direction: row;"> 
                            <div class="roundedTwo" style="">
                            <p>Antique Nickel</p>
                            <input type="checkbox" value="None" id="roundedTwo" name="check" checked="">
                            <label for="roundedTwo"></label>
                            </div>
                        </li>
                        <li style="display: flex; flex-direction: row;"> 
                            <div class="roundedTwo" style="">
                            <p>Titanium</p>
                            <input type="checkbox" value="None" id="roundedTwo" name="check" checked="">
                            <label for="roundedTwo"></label>
                            </div>
                        </li>
                        <li style="display: flex; flex-direction: row;"> 
                            <div class="roundedTwo" style="">
                            <p>Black & Aged Brass</p>
                            <input type="checkbox" value="None" id="roundedTwo" name="check" checked="">
                            <label for="roundedTwo"></label>
                            </div>
                        </li>
                        <li style="display: flex; flex-direction: row;"> 
                            <div class="roundedTwo" style="">
                            <p>Titanium</p>
                            <input type="checkbox" value="None" id="roundedTwo" name="check" checked="">
                            <label for="roundedTwo"></label>
                            </div>
                        </li>
                    </ul>
                </li>    
            </ul> <!-- This is the last attribute in the accordion -->
        </section>
    </div>

编辑: Accordion (打开时包含复选框仅供引用)。

Answer 1

您的代码中有很多错误。首先 $(this + "ul.checkbox-list") 不起作用。这是一个元素，您不能将其连接到选择器。使用 $(this).next("ul.checkbox-list") 查找下一个元素(如果它具有该类。然后你混淆了一些情况，显示了 sibling 等。你的事件类和可见类似乎无关(尽管我猜目的是让一个在按钮上，另一个在列表上)。在我修改的代码中，我将其压缩为事件类:

    $(document).ready(function(){
        
        $("a[id^='attr']").on("click", function(event) {
            event.preventDefault();
            if( $(this).next("ul.checkbox-list").hasClass("active") ) {
                $(this).next("ul.checkbox-list").slideUp(200).removeClass("active");
            } else {
                $("a[id^='attr'] > i").removeClass("fa-minus-circle").addClass("fa-plus-circle");
                $(this).find(" > i").removeClass("fa-plus-circle").addClass("fa-minus-circle");
                $("ul.checkbox-list").removeClass("active");
                $(this).siblings('ul.checkbox-list').slideUp("slow");
                $(this).next("ul.checkbox-list").slideDown(200).addClass("active");

            }

        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul id="att7">
                <li>
                    <a href="#" id="attr7"><i class="fas fa-plus-circle"> </i> Lumens</a>
                    <ul class="checkbox-list active">
                        <li style="display: flex; flex-direction: row;"> 
                            <div class="roundedTwo" style="">
                            <p>Aged Brass</p>
                            <input type="checkbox" value="None" id="roundedTwo" name="check" checked="">
                            <label for="roundedTwo"></label>
                            </div>
                        </li>
                        <li style="display: flex; flex-direction: row;"> 
                            <div class="roundedTwo" style="">
                            <p>Antique Nickel</p>
                            <input type="checkbox" value="None" id="roundedTwo" name="check" checked="">
                            <label for="roundedTwo"></label>
                            </div>
                        </li>
                        <li style="display: flex; flex-direction: row;"> 
                            <div class="roundedTwo" style="">
                            <p>Titanium</p>
                            <input type="checkbox" value="None" id="roundedTwo" name="check" checked="">
                            <label for="roundedTwo"></label>
                            </div>
                        </li>
                        <li style="display: flex; flex-direction: row;"> 
                            <div class="roundedTwo" style="">
                            <p>Black & Aged Brass</p>
                            <input type="checkbox" value="None" id="roundedTwo" name="check" checked="">
                            <label for="roundedTwo"></label>
                            </div>
                        </li>
                        <li style="display: flex; flex-direction: row;"> 
                            <div class="roundedTwo" style="">
                            <p>Titanium</p>
                            <input type="checkbox" value="None" id="roundedTwo" name="check" checked="">
                            <label for="roundedTwo"></label>
                            </div>
                        </li>
                    </ul>
                </li>    
            </ul> <!-- This is the last attribute in the accordion -->
        </section>
    </div>