悬停标题下的下拉标题

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和脚本并共享链接。