以编程方式关闭UL列表

Question

我有一个无序的项目列表，当我单击其他列表项时，我想以编程方式关闭/隐藏其子菜单，无论是另一个Mainmenu还是另一个项目。 根据给出的答案，我进行了更改，这些更改现已包括在内。

我想我已经关闭了，但是用

关闭子无序列表没有成功

    $(this).parent().next().slideToggle(200);

谢谢。

$(document).ready(function ()
{
    var wasSubmenuClicked = false;

    $('.dropdown-submenu a.HasDropDown').on("click", function (e)
    {
	    //alert("here1");
	    wasSubmenuClicked = true;

	    $(this).parent().next('ul').toggle();
	    e.stopPropagation();
	    e.preventDefault();

	    if ($(this).find('span').first().hasClass('glyphicon-circle-arrow-down'))
	    {
	        //alert("sub has down");
	       $(this).find('span').first().removeClass('glyphicon-circle-arrow-down');
	       $(this).find('span').first().addClass('glyphicon-circle-arrow-up');
	    }
	    else if ($(this).find('span').first().hasClass('glyphicon-circle-arrow-up'))
	    {
	       //alert("sub has up");
	       $(this).find('span').first().removeClass('glyphicon-circle-arrow-up');
	      $(this).find('span').first().addClass('glyphicon-circle-arrow-down');
	    }

      if ($(this).hasClass(" clicked"))
	    {
	        $(this).removeClass(" clicked");
	    }
	    else
	    {
        $(this).addClass(" clicked");
	    }
    });


    // Dropdown-toggle is on the <a under the li for mainmenu and
    //                    on the <a element, beneath a <span> under  the SubMenu <li 
    //                           this <a also has class-"HasDropDown dropdownToggle
    // This function executes for sub-menu after the above function '.dropdown-submenu a.HasDropDown').on("click",     function (e)'
    $('.dropdown-toggle').on("click", function (e)
    {
    var isSubMenu = false;
    var thisElement = $(this);

    if ($(this).hasClass("HasDropDown"))
    {
        //alert("submenu HasDropDown");  // I.e. sub menu which has been clicked
        isSubMenu = true;
        if (wasSubmenuClicked == true)
        {
            //alert("check if clicked");
            if ($(this).hasClass("clicked"))
            {
                //alert("was clicked");
                $(this).removeClass("clicked");
               // the sub-menu function handles the submenu arrows
               // this function only clears all submenu up arrows if it is not ticked
            }
        }
    }
    else  // It's a MainMenu item 
    {
        // Clear any other sub menu items of "clicked", set all as down
        $('.dropdown-submenu').each(function ()
        {
            if (wasSubmenuClicked == true)
            {
                if (!$(this).hasClass("clicked"))  //set by submenu click before this event fires
                {
                    if ($(this).find('span').first().hasClass('glyphicon-circle-arrow-up'))
                    {
                        //alert("each submenu UpArrow");
                        $(this).find('span').first().removeClass('glyphicon-circle-arrow-up');
                        $(this).find('span').first().addClass('glyphicon-circle-arrow-down');

                        $(this).parent().next().slideToggle(200);
                   }
                   else
                   {
                       //alert("each submenu DownArrow");
                       $(this).find('span').removeClass('glyphicon-circle-arrow-down');
                       $(this).find('span').addClass('glyphicon-circle-arrow-up');
                   }
            }
            else
            {
                //alert("subby not clicked");
            }
        }
    });


    // Main Menus
    $('.dropdown-menu').each(function ()
    {
        //if (thisElement == $(this))
        //{
             if ($(this).find('span').first().hasClass('glyphicon-circle-arrow-up'))
              {
                 //alert("each menu UpArrow");
                 $(this).find('span').first().removeClass('glyphicon-circle-arrow-up');
                 $(this).find('span').first().addClass('glyphicon-circle-arrow-down');

                  // Nope...It disappears a main menu
                 //$(this).parent().next().slideToggle(200);
               }
              else 
               { 
                  thisElement.find('span').first().removeClass('glyphicon-circle-arrow-down');
                  thisElement.find('span').first().addClass('glyphicon-circle-arrow-up');
               }
              //}
              //else
              //{
              //alert(" the each on Main found a match on this clicked main");
              //}
          });

          // Now the Menu clicked on
          alert("main menu itself clicked on");
          if (thisElement.find('span').first().hasClass('glyphicon-circle-arrow-up'))
          {
              alert("Main menu UpArrow");
              thisElement.find('span').first().removeClass('glyphicon-circle-arrow-up');
              thisElement.find('span').first().addClass('glyphicon-circle-arrow-down');
          }
          else
          {
              alert("Main menu DownArrow");
              thisElement.find('span').first().removeClass('glyphicon-circle-arrow-down');
              thisElement.find('span').first().addClass('glyphicon-circle-arrow-up');
            }
        }	
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="dropdown-submenu">
  <span>
    <a class="HasDropDown dropdown-toggle" style="color: gainsboro; background-color: black !important;" href="#">
        <span class="glyphicon glyphicon-circle-arrow-up"></span> Fleet Management
  </a>
  </span>
  <ul class="dropdown-menu" style="display: block;">
    <li class="dropdown-submenu">
      <a style="color: gainsboro; background-color: black !important;" href="/TCO/Edit">
            TCO
            </a>
    </li>
    <li class="dropdown-submenu">
      <a style="color: gainsboro; background-color: black !important;" href="/Report/TCO">
            Reports
            </a>
    </li>
    <ul>
</li>

Answer 1

$('.HasDropDown').on("click", function() {
  if( $(this).children("ul").css("display")!="none")
    $(this).children("ul").css("display", "none");
  else
    $(this).children("ul").css("display", "block");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="dropdown-submenu HasDropDown">
  <span>
	    <a style="color: gainsboro; background-color: black !important;" href="#">			
	        <span class="glyphicon glyphicon-circle-arrow-up"></span> Fleet Management
  </a>
  </span>
  <ul class="dropdown-menu" style="display: block;">
    <li class="dropdown-submenu">
      <a style="color: gainsboro; background-color: black !important;" href="/TCO/Edit">
		        TCO
	            </a>
    </li>
    <li class="dropdown-submenu">
      <a style="color: gainsboro; background-color: black !important;" href="/Report/TCO">
		        Reports
	            </a>
    </li>
    <ul>
</li>

Answer 2

使用jquery slideToggle非常简单，请参见下面的代码段。

$('a.HasDropDown').on("click", function(e) {
  $(this).parent().next().slideToggle(200);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="dropdown-submenu">
  <span>
	    <a class="HasDropDown" style="color: gainsboro; background-color: black !important;" href="#">			
	        <span class="glyphicon glyphicon-circle-arrow-up"></span> Fleet Management
  </a>
  </span>
  <ul class="dropdown-menu" style="display: block;">
    <li class="dropdown-submenu">
      <a style="color: gainsboro; background-color: black !important;" href="/TCO/Edit">
		        TCO
	            </a>
    </li>
    <li class="dropdown-submenu">
      <a style="color: gainsboro; background-color: black !important;" href="/Report/TCO">
		        Reports
	            </a>
    </li>
    <ul>
</li>