Dropdown onclick，點擊關閉

Question

以前我收到了一個標題，上面有一個顯示在懸停上的下拉菜單。 我想將其更改爲onclick。

下拉菜單當前顯示onclick，但再次單擊時，下拉菜單不會關閉。只有當鼠標離開div時它纔會關閉。

我該如何改變這一點，以便下拉菜單總是打開，只有通過點擊網站上的某個地方或事件才能關閉下拉菜單。

代碼：

<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 your shopping cart.') ?></p> 
     </div> 
    </div> 
</div> 

我用這個代碼，網站上的下拉菜單：

<?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 is opened (parent already 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' to 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 is delayed the same amount of time as drop-down animation. ?> 
     clearTimeout(dMenuPosTimeout); 
     dMenuPosTimeout = setTimeout(function() { 

      if (ddMenu.offset().left < 0) 
      { 
       var space = ddWrapper.offset().left; <?php //Space available on the 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, to 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'); 
    }); 

Answer 1

我仍然無法看到下拉菜單中的任何HTML。 您使用$('.clickable-dropdown .....這個Element和它的子元素在哪裏？

我如何改變這一狀況，使下拉永遠是開放的，只有 可以通過點擊網站上或 事件某處被關閉？

這裏是一個非常簡單的DropDown菜單如何實現的例子！ 它只是一個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(); 
});