Wsrtjtyk

I have 2 problems:

1. I'm trying to create an click-off event, where a click off of the "nav" menu is detected, which triggers the deselection of the open list element and retracts its respective dropdown content.




2. My current code doesn't allow another list element/navigation item without dropdown content to be added, as doing so hinders the entirety of the code from working. I'd like to add another "nav" list element that doesn't have dropdown contents, without hindering the functionality of the other list elements and their respective dropdown content.

JSFiddle

HTML

<div id="nav">

  <ul class="nav-ul">

    <li class="" rel="pay1">Color</li>

    <li rel="pay2">Shape</li>

    <li rel="pay3">Size</li>

  </ul>

  <div class="substitute">

    <div id="pay1" class="sub-child">

      <ul>

        <li>Red</li>

        <li>Blue</li>

        <li>Green</li>

      </ul>

    </div>

    <div id="pay2" class="sub-child">

      <ul>

        <li>Square</li>

        <li>Circle</li>

        <li>Triangle</li>

        <li>Diamond</li>

      </ul>

    </div>

    <div id="pay3" class="sub-child">

      <ul>

        <li>Small</li>

        <li>Medium</li>

        <li>Large</li>

      </ul>

    </div>

  </div>

</div>

CSS

* {

  margin: 0;

  padding: 0;

}

#nav {

  background-color: /*blue*/;

  float: right;

}

#nav .nav-ul {

  list-style: none;

  float: right;

  background-color: /*yellow*/;

  border-left: solid 2px #000000;

  border-right: solid 2px #000000;

}

#nav .nav-ul li {

  float: left;

  padding: 4px;

  font-weight: bold;

  color: #000000;

}

#nav .nav-ul li:hover {

  cursor: pointer;

  text-decoration: underline;

  color: #E51D27;

}

#nav .nav-ul li.detected {

  color: #E51D27;

}



#nav .substitute {

  float: right;

  background-color: /*pink*/;

  margin-right: 4px;

}

#nav .substitute .sub-child {

  float: left;

  display: none;

}

#nav .substitute .sub-child.active {

  display: block;

}





#nav .substitute .sub-child ul {

  list-style: none;

}

#nav .substitute .sub-child ul li {

  float: left;

  padding: 4px;

}

JQuery

$(function() {



    function animate() {

    $('#nav .nav-ul li').off('click', animate)

    var $detected = $(this).closest('.nav-ul');

    $detected.find('li.detected').removeClass('detected');

    $(this).addClass('detected');



    //figure out which rel to show

    var ulToShow = $(this).attr('rel');



    //hide current rel

    if ($('.substitute .sub-child.active').length > 0) {

      $('.substitute .sub-child.active').hide(700, function() {

        $(this).removeClass('active');

        $('#'+ulToShow).fadeIn(528, function() {

          $(this).addClass('active');

          $('#nav .nav-ul li').on('click', animate)



        });

      });

    } else {

        $('#'+ulToShow).fadeIn(528, function() {

          $(this).addClass('active');

          $('#nav .nav-ul li').on('click', animate)

        });

    }

  }



    $('#nav .nav-ul li').on('click', animate);

});