如果单击相同的元素，如何再次关闭下拉菜单？
如果单击相同的元素，如何再次关闭下拉菜单？
提问于 2018-01-04 07:58:42
我编写了以下代码，使drop-down菜单在每次单击时都会切换，另外还可以关闭任何其他切换菜单，但由于某种原因，在再次单击之后，我无法关闭菜单。
$(document).ready(function(){
"use strict";
$(".dropdown").hide();
$("#smpg-cat-list li span").click(function() {
$(".dropdown").hide();
$("#smpg-cat-list li span").html('<i class="fa fa-plus" aria-hidden="true"></i>');
if( $(this).next('.dropdown').css('display') == 'none' ){
$(this).next('.dropdown').show();
$(this).html('<i class="fa fa-minus" aria-hidden="true"></i>');
}else{
$(this).next('.dropdown').hide();
$(this).html('<i class="fa fa-plus" aria-hidden="true"></i>');
}
});
});所以我想要密码：
- 隐藏所有
.dropdown类。 - 然后，如果在
#smpg-cat-list li span上单击，它应该关闭任何显示的菜单，如果有。 - 将隐藏元素的html更改为加号图标。
- 然后，对于当前单击的元素，我检查下一个
.dropdown类是否有一个display = none;。 - 如果为true，则显示此元素，并再次将图标更改为减号。
- 如果为false，则隐藏此元素并将图标更改为加号。
它会显示元素，但如果再次单击，则不会隐藏。
<ul id="smpg-cat-list">
<li><a href="/web-design/">Web Design</a>
</li>
<li><a href="/robots/">Robots</a></li>
<li>
<a href="/programming/">Programming</a>
<span class="toggle" style="cursor:pointer"><i class="fa fa-plus" aria-hidden="true"></i></span>
<ul class="dropdown">
<li><a href="/programming/php/">PHP</a></li>
<li><a href="/programming/c/">C#</a></li>
</ul>
</li>
<li>
<a href="/frameworks/">Frameworks</a>
<span class="toggle" style="cursor:pointer"><i class="fa fa-plus" aria-hidden="true"></i></span>
<ul class="dropdown">
<li><a href="/frameworks/laravel/">Laravel</a></li>
</ul>
</li>
<li><a href="/data-analysis/">Data Analysis</a></li>
<li>
<a href="/cms/">CMS</a>
<span class="toggle" style="cursor:pointer"><i class="fa fa-plus" aria-hidden="true"></i></span>
<ul class="dropdown">
<li><a href="/cms/wordpress/">WordPress</a></li>
<li><a href="/cms/joomla/">Joomla</a></li>
</ul>
</li>
</ul>也没有特别的CSS。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-04 08:28:10
在下面的片段中，在单击span之后，我使用[.find()][1]查找i标记并检查它是否有某个类，然后使用[.hasClass()][1]替换fa-plus，或者用fa-minus替换fa-plus，然后显示同级下拉列表。
这应该对你有帮助：
$(document).ready(function() {
"use strict";
$(".dropdown").hide();
$("#smpg-cat-list li span").click(function() {
$(".dropdown").hide();
var $i = $(this).find("i");
console.log($i);
if ($i.hasClass("fa-plus")) {
$i.removeClass("fa-plus").addClass("fa-minus");
$(this).next('.dropdown').show();
} else {
$i.removeClass("fa-minus").addClass("fa-plus");
$(this).next('.dropdown').hide();
}
});
});<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="smpg-cat-list">
<li><a href="#">Web Design</a>
</li>
<li><a href="#">Robots</a></li>
<li>
<a href="#">Programming</a>
<span class="toggle" style="cursor:pointer"><i class="fa fa-plus" aria-hidden="true"></i></span>
<ul class="dropdown">
<li><a href="#">PHP</a></li>
<li><a href="#">C#</a></li>
</ul>
</li>
<li>
<a href="#">Frameworks</a>
<span class="toggle" style="cursor:pointer"><i class="fa fa-plus" aria-hidden="true"></i></span>
<ul class="dropdown">
<li><a href="#">Laravel</a></li>
</ul>
</li>
<li><a href="#">Data Analysis</a></li>
<li>
<a href="#">CMS</a>
<span class="toggle" style="cursor:pointer"><i class="fa fa-plus" aria-hidden="true"></i></span>
<ul class="dropdown">
<li><a href="#">WordPress</a></li>
<li><a href="#">Joomla</a></li>
</ul>
</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48090976
复制相关文章
相似问题
腾讯云开发者
