Javascript 单击下拉列表，单击关闭

之前，我得到了一个标题和一个下拉列表，显示在悬停。 我想把这个改成onclick

下拉列表当前显示onclick，但再次单击时，下拉列表不会关闭。只有当鼠标离开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');
    }); 

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'）。单击（函数（）{
$（this.parent（）.addClass（'open'）；
$（this.parent（）.trigger（'mouseenter'）；
});
//$（'.下拉标题'）。在（'单击'）上，函数（e）{
$（文档）。在（'单击'，'上。下拉标题'，函数（e）{
e、 预防默认值（）；
});
$（文档）.on（'click'，'dropdown'，function（）{
var ddToggle=$（this.children（'.dropdown heading'）；
var ddMenu=$（this.children（'.dropdown content'）；
var ddWrapper=ddMenu.parent（）；
css（“左”，“右”）；
css（“右”和“）；
if（$（this）.hasClass（'clickable-dropdown'））
{
if（$（this）.hasClass（'open'））
{
$（此）.children（'.dropdown content'）.stop（true，true）.delay（DD_delay_IN）.fadeIn（DD_ANIMATION_IN，“easeOutCubic”）；
}
}
其他的
{
清除超时（ddOpenTimeout）；
ddOpenTimeout=setTimeout（函数（）{
ddWrapper.addClass（'open'）；
}，DD_DELAY_IN）；
//$（this.addClass（'open'）；
$（此）.children（'.dropdown content'）.stop（true，true）.delay（DD_delay_IN）.fadeIn（DD_ANIMATION_IN，“easeOutCubic”）；
}
clearTimeout（dMenuPosTimeout）；
dMenuPosTimeout=setTimeout（函数（）{
if（ddMenu.offset（）.left<0）
{
var space=ddWrapper.offset（）.left；
css（“左”（-1）*空格）；
css（“右”、“自动”）；
}
}，DD_DELAY_IN）；
}).on（'mouseleave'，'.dropdown'，function（）{
var ddMenu=$（this.children（'.dropdown content'）；
清除超时（ddOpenTimeout）；
ddMenu.stop（真、真）、delay（延迟输出）、fadeOut（动画输出“easeInCubic”）；
if（ddMenu.is（“：hidden”））
{
ddMenu.hide（）；
}
$（this.removeClass（'open'）；
}); 

我仍然看不到任何下拉菜单的HTML。 您使用了

$（'）。可单击下拉列表…

此元素及其子元素在哪里

如何更改此选项，使下拉列表始终处于打开状态，以及 只能通过单击网站上的某个位置或 事件

下面是一个如何实现下拉菜单的简单示例！ 这只是一个演示：

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>

JS/JQuery:

.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;
}

    $(".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();
});

---

请您提供php代码生成的html。我在您的代码中看不到任何下拉菜单的html！@Rami.Q我编辑代码。欢迎使用JSFIDLE进行演示！：）

    $(".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();
});