Jquery 如果单击同一元素，如何再次关闭下拉菜单？

我编写了以下代码，以在每次单击时切换

下拉菜单

，并关闭任何其他切换菜单，但由于某些原因，我无法在再次单击后关闭菜单

$(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>');
      }

  });
});

---

而且没有特殊的CSS。

在下面的snipet I中，单击span后，我使用

[.find（）][1]

找到

I

标记，并使用

[.hasClass（）][1]

然后用

fa-minus

替换

fa-plus

，或者进行相反的操作，然后显示同级下拉列表

这将有助于您：

$（文档）.ready（函数（）{
“严格使用”；
$（“.dropdown”）.hide（）；
$（“#smpg cat list li span”）。单击（函数（）{
$（“.dropdown”）.hide（）；
var$i=$（this.find（“i”）；
控制台日志（一美元）；
如果（$i.hasClass（“fa plus”））{
$i.removeClass（“fa加”）.addClass（“fa减”）；
$（this.next（'.dropdown'）.show（）；
}否则{
$i.removeClass（“fa减”）.addClass（“fa加”）；
$（this.next（'.dropdown'）.hide（）；
}
});
});























发布html和CSST感谢您的回复，我已经添加了html，没有CSST非常感谢您，但我需要知道为什么我的代码不起作用谢谢您，我接受了答案，但最后请您解释一下为什么我使用的支票总是返回
无
，如果我想依赖css函数，我应该使用什么方法呢？如果你需要再次替换你的代码，我认为你在编辑中错误地添加了我的代码
<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>