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

我仍然看不到任何DropDown-Menu的HTML。你使用$('.clickable-dropdown .....这个元素及其子元素在哪里？

如何更改此权限，以便下拉列表始终打开，并且只能通过点击网站上的某个位置或关闭来关闭事件

这是一个如何实现DropDown-Menu的非常简单的示例！它只是一个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();
});

下拉点击，点击关闭

1 个答案: