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

Question

我会直奔主题，我正在尝试完成这个手风琴效果(当你打开一个时，其他的关闭(，手风琴上有大约 7 个属性.每个都有一个加号，所以当你打开时，它应该变成一个减号(通过字体真棒，这部分我可以照顾，只是为了上下文(。

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>

编辑：手风琴(打开时，包含复选框仅供参考(。

Answer 1

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

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

代码上的几个错误：

#1$(this + "ul.checkbox-list")你可以简单地做一个console.log(this)来知道this不是一个字符串，因为+是concat()的缩写，因为你很可能最终会这样做

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

#2此代码

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

与

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

正如您从文档中看到的那样，slide是一个异步函数，而不是同步的，因此它将立即执行链，而不是等待任何事情......若要仅在幻灯片动画结束时删除类，需要将其作为回调传递

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

#3您正在检查一个visible类，但是在您的所有代码中，您所做的只是处理一个active类......

---

总而言之，我会修复并重构您的代码，如下所示：

解释所有线条以更好地理解

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