Question

我编写了以下代码，除了关闭任何其他切换菜单外，还可以在每次点击时切换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 class有一个display = none;。
如果为true，请显示此元素并再次将图标更改为减号。
如果为false，请隐藏此元素并将图标更改为加号

并显示该元素，但如果再次点击则不会隐藏。

HTML

<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。

Answer 1

在下面的snipet中我点击了span后，我使用[.find()][1]来查找i标记，并使用[.hasClass()][1]检查它是否有某个类然后将fa-plus替换为fa-minus或制作倒数然后显示同级下拉列表。

这可以帮到你：

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

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

1 个答案: