懸停標題下的下拉標題

Question

我在標題中使用此代碼來顯示購物車。 當前，下拉列表顯示在懸停上。

我如何修改它，以便下拉菜單顯示為onclick ？

<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">
    <?php echo $this->getChildHtml('minicart_content');?>
</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('mouseenter', '.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

更改此行$(document).on('mouseenter', '.dropdown', function() {

到$(document).on('click', '.dropdown', function() {

您可能應該完全刪除on('mouseleave')函數並將其放入點擊邏輯中

在這里編輯是使用一個JS的完整解決方案（請不要使用<?php標記進行評論）

    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() {
        if($(this).hasClass('open')) {

            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');
        } else {
            var ddToggle = $(this).children('.dropdown-heading');
            var ddMenu = $(this).children('.dropdown-content');
            var ddWrapper = ddMenu.parent();


            ddMenu.css("left", "");
            ddMenu.css("right", "");

            if ($(this).hasClass('clickable-dropdown'))
            {
                if ($(this).hasClass('open'))
                {
                    $(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
                }
            }
            else
            {
                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");
            }
            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);
        }
    });

Answer 2

更改'mouseenter' --> 'click' ，因為'click'將為您做到這一點，而對大腦的傷害則大大減少。 我仍然看到您的問題陳述不完整如果您想為要實現的目標提供完整的解決方案，那么也許您必須在問題陳述中提供更多詳細信息，作為要實現的陳述，並提供完整的html。 使用Fiddler並上傳html和腳本並共享鏈接。