完成一个手风琴 jQuery 功能，我尝试了很多，似乎没有任何效果？

Question

I'll get straight to the point, I'm trying to complete this accordion effect (when you open one, the others close) and there is about 7 attributes on the accordion. Each one has a PLUS sign so when you open that it should turn into a MINUS sign (via Font Awesome, this part I can take care of, just for context).

HTML The <a> contains the icon which is a + sign and the ul.checkbox-list is what needs to be monitored for whether or not it has an active class so it can collapse the others. I've gotten somewhat close but then something else happens, I thought maybe another set of eyes could help?

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

EDIT: The accordion (when opened, contains checkboxes FYI).

Answer 1

There are a multitude of mistakes in your code. First of all $(this + "ul.checkbox-list") does not work. This is an element, you cannot concat it to a selecor. Use $(this).next("ul.checkbox-list") to find the next elemen (IF it has that class. Then you mixed up some cases, showing the siblings etc. Your active class and visible class seemed unrelated (though I guess the purpose was to have one on the button the other on the list). In the code I modified I condensed it down to just active class:

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

Answer 2

several mistakes on your code:

#1 $(this + "ul.checkbox-list") you could simply do a console.log(this) to know that this is not a string, as the + is a abreviation for concat() as you would most likely end up doing

$("[object HTMLDocument]ul.checkbox-list")

#2 this code

.slideUp(200).removeClass("active")

is the same as

.removeClass("active").slideUp(200)

as the slide as you can see from the documentation, is an async function, not synchronous, so it will execute the chain right away, and not wait for anything ... to remove the class only when the slide animation ends, you would need to pass it as a callback

.slideUp(200, () => ...removeClass("..."))

#3 you are checking for a visible class, but in all your code, all you do is handle an active class instead...

---

all in all, I would fix and refactor your code into something like this:

all lines explained for better understanding

 $(function() { $("a[id^='attr']").on("click", onClickLink); }); function onClickLink(evt) { evt.preventDefault(); // prevent browser to jump up var elm = $(evt.delegateTarget), // the jquery traget elemnet chb = elm.next("ul.checkbox-list"), // the next ul.checkbox-list isActive = chb.hasClass("active"); // if the next element is active minimizeAll(() => { // reset to default position if(!isActive) maximizeGroup(elm); // maximize only if the clicked elm is not active }); } // minimize all elements function minimizeAll(cb) { if($("ul.checkbox-list.active").length === 0 && cb) // prevent slide up when all are minimized return cb(); // if callback is passed, use it $("a[id^='attr'] > i") // find all .addClass("fa-plus-circle") // add PLUS .removeClass("fa-minus-circle"); // remove MINUS $("ul.checkbox-list").slideUp("slow", () => { // start sliding up $("ul.checkbox-list").removeClass("active"); // when sliding up ends, remove active class if(cb) cb(); // if callback is passed, use it }); } // maximize only the element group function maximizeGroup(elm) { elm.next("ul.checkbox-list").stop().slideDown(200, () => { // STOP any previous animation and start sliding down the selected group elm.find("> i") // from the clicked element (<a>) find (<i>) .removeClass("fa-plus-circle") // remove PLUS .addClass("fa-minus-circle"); // add MINUS elm // from the clicked element (<a>) .next("ul.checkbox-list") // select next ul.checkbox-list .addClass("active"); // and add "active" class }); }

 a[id^='attr'] { text-decoration: none; color: #333; } ul li { list-style: none; } /* default values */ ul ul { display: none; } ul ul > li { display: flex; flex-direction: row; } ul.checkbox-list.active { display: flex; flex-direction: column; }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" integrity="sha384-v8BU367qNbs/aIZIxuivaU55N5GPF89WBerHoGA4QTcbUjYiLQtKdrfXnqAcXyTv" crossorigin="anonymous"> <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 1</a> <ul class="checkbox-list"> <li> <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> <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> <div class="roundedTwo" style=""> <p>Titanium</p> <input type="checkbox" value="None" id="roundedTwo" name="check" checked=""> <label for="roundedTwo"></label> </div> </li> <li> <div class="roundedTwo" style=""> <p>Black &amp; Aged Brass</p> <input type="checkbox" value="None" id="roundedTwo" name="check" checked=""> <label for="roundedTwo"></label> </div> </li> <li> <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> <section> <ul id="att8"> <li> <a href="#" id="attr8"><i class="fas fa-plus-circle"></i> Lumens 2</a> <ul class="checkbox-list"> <li> <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> <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> <div class="roundedTwo" style=""> <p>Titanium</p> <input type="checkbox" value="None" id="roundedTwo" name="check" checked=""> <label for="roundedTwo"></label> </div> </li> <li> <div class="roundedTwo" style=""> <p>Black &amp; Aged Brass</p> <input type="checkbox" value="None" id="roundedTwo" name="check" checked=""> <label for="roundedTwo"></label> </div> </li> <li> <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>