Как скрыть класс при повторном нажатии на главный пункт меню?

[dred_01]

$(document).ready(function () {

        function hideallDropdowns() {
            $(".dropped .dropdown-menu").hide();
            $(".dropped").removeClass('dropped');
            $(".dropped .dropdown-menu").unbind("click");
        }

        function showDropdown(el) {
            var el_li = $(el).parent().addClass('dropped');
            el_li
                .find('.dropdown')
                .click(function () {
                    hideallDropdowns();
                })
                .html($(el).html());

            el_li.find('.dropdown-menu').show();
        }

        $(".dropdown-toggle").click(function(){
            showDropdown(this);
        });

        $(document).mouseup(function () {
            hideallDropdowns();
        });
    });

<ul class="nav navbar-nav">
  <li class="dropdown dropdown-mega-menu">
    <span class="dropdown-toggle extra-arrow"></span>
    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
      <span class="act-underline">
        Мужчины</span>
    </a>
    <ul class="dropdown-menu megamenu category" role="menu">
      <li class="col-sm-3">
        <a class="megamenu__subtitle">
          <span>Форма</span>
        </a>
      </li><li class="col-sm-3">
      <a class="megamenu__subtitle">
        <span>Одежда</span>
      </a>
      </li><li class="col-sm-3">
      <a class="megamenu__subtitle">
        <span>Обувь</span>
      </a>
      </li>
      <li class="col-sm-3">
        <a class="megamenu__subtitle">
          <span>Аксессуары</span>
        </a>
      </li>
    </ul>
  </li>    
  <li class="dropdown dropdown-mega-menu">
    <span class="dropdown-toggle extra-arrow"></span>
    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
      <span class="act-underline">Женщины</span>
    </a>
    <ul class="dropdown-menu megamenu category" role="menu">
      <li class="col-sm-3">
        <a class="megamenu__subtitle">
          <span>Аксессуары</span>
        </a>
      </li><li class="col-sm-3">                                
      <a class="megamenu__subtitle">
        <span>Обувь</span>
      </a>      
      </li><li class="col-sm-3">                                
      <a class="megamenu__subtitle">
        <span>Одежда</span>
      </a>
      </li><li class="col-sm-3">
      <a class="megamenu__subtitle">
        <span>Спорт</span>
      </a>      
      </li>
    </ul>
  </li>
  <li class="dropdown dropdown-mega-menu">
    <span class="dropdown-toggle extra-arrow"></span>
    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
      <span class="act-underline">Дети</span>
    </a>
    <ul class="dropdown-menu megamenu category" role="menu">
      <li class="col-sm-3">
        <a class="megamenu__subtitle">
          <span>Аксессуары</span>
        </a>
      </li><li class="col-sm-3">
      <a class="megamenu__subtitle">
        <span>Обувь</span>                
      </a>
      </li><li class="col-sm-3">
      <a class="megamenu__subtitle">
        <span>Одежда</span>
      </a>
      </li><li class="col-sm-3">
      <a class="megamenu__subtitle">
        <span>Форма</span>
      </a>                
      </li></ul>
  </li>
  <li class="dropdown dropdown-mega-menu">
    <span class="dropdown-toggle extra-arrow"></span>
    <a href="http://joma-official.ru.fozzyhost.com/specials/" class="dropdown-toggle" data-toggle="dropdown">
      <span class="act-underline menu-red">Дисконт</span>
    </a>
  </li>
</ul>

[void()]

как-то странно меню работает у вас. а если так?

$(document).ready(function () {
			$('.dropdown-toggle').click(function() {
				$('.megamenu').toggle();
				$(this).next().toggle();
				$('.megamenu').toggle();
			});
		});

.category{
		display:none;
	}