javascript - Dropdown onclick, close on click -

previously got header dropdown displayed on hover. wanted change onclick.

the dropdown displays onclick, when clicking again dropdown not close. close when mouse navigate off div.

how can change this, dropdown open, , can closed clicking somewhere on website or on event?

code:

<a href="#header-cart" class="skip-link skip-cart <?php if($_cartqty <= 0): ?> no-count<?php endif; ?>">     <span class="icon"></span>     <span class="label"><?php echo $this->__('cart'); ?></span>     <span class="count"><?php echo $_cartqty; ?></span> </a>  <div id="header-cart" class="block block-cart skip-content">     <div class="block block-progress opc-block-progress minicart-wrapper">       <div class="block-title-cartsidebar">shoppingcart</div>         <p class="empty"><?php echo $this->__('you have no items in shopping cart.') ?></p>       </div>     </div> </div> 

i use code dropdown on website:

    <?php //drop-down ?>     var ddopentimeout;     var dmenupostimeout;     var dd_delay_in = 200;     var dd_delay_out = 0;     var dd_animation_in = 0;     var dd_animation_out = 0;      $('.clickable-dropdown > .dropdown-heading').click(function() {         $(this).parent().addclass('open');         $(this).parent().trigger('mouseenter');     });      //$('.dropdown-heading').on('click', function(e) {     $(document).on('click', '.dropdown-heading', function(e) {         e.preventdefault();     });      $(document).on('click', '.dropdown', function() {          var ddtoggle = $(this).children('.dropdown-heading');         var ddmenu = $(this).children('.dropdown-content');         var ddwrapper = ddmenu.parent(); <?php //$(this); ?>          <?php //clear old position of dd menu ?>         ddmenu.css("left", "");         ddmenu.css("right", "");          <?php //show dd menu ?>         if ($(this).hasclass('clickable-dropdown'))         {             <?php //if dropdown opened (parent has class 'open') ?>             if ($(this).hasclass('open'))             {                 $(this).children('.dropdown-content').stop(true, true).delay(dd_delay_in).fadein(dd_animation_in, "easeoutcubic");             }         }         else         {             <?php //add class 'open' dd ?>             cleartimeout(ddopentimeout);             ddopentimeout = settimeout(function() {                  ddwrapper.addclass('open');              }, dd_delay_in);              //$(this).addclass('open');             $(this).children('.dropdown-content').stop(true, true).delay(dd_delay_in).fadein(dd_animation_in, "easeoutcubic");         }          <?php //set new position of dd menu.               //this code delayed same amount of time drop-down animation. ?>         cleartimeout(dmenupostimeout);         dmenupostimeout = settimeout(function() {              if (ddmenu.offset().left < 0)             {                 var space = ddwrapper.offset().left; <?php //space available on left of dd ?>                 ddmenu.css("left", (-1)*space);                 ddmenu.css("right", "auto");             }          }, dd_delay_in);      }).on('mouseleave', '.dropdown', function() {          var ddmenu = $(this).children('.dropdown-content');         cleartimeout(ddopentimeout); <?php //clear, close dd on mouseleave ?>         ddmenu.stop(true, true).delay(dd_delay_out).fadeout(dd_animation_out, "easeincubic");         if (ddmenu.is(":hidden"))         {             ddmenu.hide();         }         $(this).removeclass('open');     });  

still cannot see html of dropdown-menu. use $('.clickable-dropdown ..... element , sub-elements?

how can change this, dropdown open, , can closed clicking somewhere on website or on event?

here simple example of how dropdown-menu implemented! demo:

http://jsfiddle.net/f43yh0jk/4/

html:

<div class="tree">     <div class="node">         <a class="node-link" href="/test">about</a>         <div class="nodes">             <div class="node">                 <a class="node-link">my story</a>             </div>             <div class="node">                 <a class="node-link">my style</a>             </div>             <div class="node">                 <a class="node-link">my style x</a>             </div>             <div class="node">                 <a class="node-link">my style y</a>             </div>         </div>     </div><div class="node">         <a class="node-link">service</a>         <div class="nodes">             <div class="node">                 <a class="node-link">my pricing</a>             </div>             <div class="node">                 <a class="node-link">services</a>             </div>         </div>     </div> </div> 

css:

.tree{     background: #3f4c6b; }  .tree > .node{     background: #313654;     display: inline-block;     border-left: 1px solid #000;     border-right: 1px solid #3f4c6b;     position: relative;     cursor: pointer; } .tree > .node:first-child{     border-left: 0px solid #000; } .tree > .node:last-child{     border-right: 0px solid #000; }  .tree > .node:hover{     background: #3f4c6b; }  .tree > .node a.node-link{     display: block;     padding: 5px 10px 5px 10px;     font-size: 13px;     font-weight: bold;     color: #fff; }  .tree > .node .nodes{     position: absolute;     left: 0px;     top: 100%;     background: #3f4c6b;     padding: 5px;     display: none; }  .tree > .node .nodes .node a.node-link{     display: block;     white-space: nowrap; }  .tree > .node .nodes .node:hover{     background: #313654; } 

js/jquery:

    $(".tree > .node > a").click(function(event){     event.preventdefault(); }); $(".tree > .node").click(function(event){     event.stoppropagation();     $(this).parent().find(".node").not(this).find(".nodes").slideup();     $(this).find(".nodes").slidetoggle(); });  $(document).click(function(event ) {         $(".tree .nodes").slideup(); });