jQuery Accordion Menu - 可点击完整按钮答案

【问题标题】：jQuery Accordion Menu - Full button clickablejQuery Accordion Menu - 可点击完整按钮
【发布时间】：2014-02-28 14:52:09
【问题描述】：

现在我有一个 jquery 手风琴菜单，当按下屏幕上的 + 时会打开子菜单。如果您选择不在 + 上的菜单选项，则会转到主类别页面。我正在尝试将 jquery 修改为当按下菜单标题或 + 时，子菜单将下拉，永远不会进入主类别页面。

JQUERY 代码：

(function (jQuery) {
jQuery.fn.extend({
    accordion: function () {
        return this.each(function () {
            var listObject = jQuery(this),
                elementDataKey = "accordiated",
                activeClassName = "active",
                activationEffect = "slideToggle",
                panelSelector = "ul, div",
                activationEffectSpeed = "fast",
                itemSelector = "li";
            if (listObject.data(elementDataKey)) return false;
            jQuery.each(listObject.find("ul, li>div"), function () {
                jQuery(this).data(elementDataKey, true);
                jQuery(this).hide()
            });
            jQuery.each(listObject.find("span.opener"), function () {
                jQuery(this).click(function (e) {
                    activate(this, activationEffect);
                    return void 0
                });
                jQuery(this).bind("activate-node", function () {
                    listObject.find(panelSelector).not(jQuery(this).parents()).not(jQuery(this).siblings()).slideUp(activationEffectSpeed);
                    activate(this, "slideDown")
                })
            });
            var active = location.hash ? listObject.find('a[href=\'' + location.hash + '\']')[0] : listObject.find("li.current a")[0];
            if (active) activate(active, false);

            function activate(el, effect) {
                jQuery(el).parent(itemSelector).siblings().removeClass(activeClassName).children(panelSelector).slideUp(activationEffectSpeed);
                jQuery(el).siblings(panelSelector)[effect || activationEffect](effect == "show" ? activationEffectSpeed : false, function () {
                    if (jQuery(el).siblings(panelSelector).is(":visible")) jQuery(el).parents(itemSelector).not(listObject.parents()).addClass(activeClassName);
                    else jQuery(el).parent(itemSelector).removeClass(activeClassName); if (effect == "show") jQuery(el).parents(itemSelector).not(listObject.parents()).addClass(activeClassName);
                    jQuery(el).parents().show()
                })
            }
        })
    }
})
})(jQuery);
jQuery(function ($) {
$(".accordion").accordion();
$(".accordion").each(function (index) {
    var activeItems = $(this).find("li.active");
    activeItems.each(function (i) {
        $(this).children("ul").css("display", "block");
        if (i == activeItems.length - 1) $(this).addClass("current")
    })
})
});

HTML 代码：

<div class="nav container clearer show-bg">
      <div id="mobnav" class="grid-full" style="display: block;">
        <a id="mobnav-trigger" href="" class="active">
            <span class="trigger-icon"><span class="line"></span><span class="line"></span><span class="line"></span></span>
            <span>Browse Categories</span>
        </a>
    </div>

    <ul class="accordion vertnav vertnav-top grid-full mobile show">

                                    <li class="level0 nav-1 level-top first">
<a href="http://fastgateopeners.com/store/mhome.html" class="level-top">
<span>Home</span>
</a>
</li><li class="level0 nav-2 level-top">
<a href="http://fastgateopeners.com/store/low-voltage-operators.html" class="level-top">
<span>Low Voltage Operators</span>
</a>
</li><li class="level0 nav-3 level-top parent current">
<a href="http://fastgateopeners.com/store/conventional-operators.html" class="level-top">
<span>Conventional Operators</span>
</a>
<span class="opener">&nbsp;</span>

<ul class="level0" style="display: none;">
<li class="level1 nav-3-1 first">
<a href="http://fastgateopeners.com/store/conventional-operators/swing-gate-operators.html">
<span>Swing Gate Operators</span>
</a>
</li><li class="level1 nav-3-2">
<a href="http://fastgateopeners.com/store/conventional-operators/barrier-gate-operators.html">
<span>Barrier Gate Operators</span>
</a>
</li><li class="level1 nav-3-3 last">
<a href="http://fastgateopeners.com/store/conventional-operators/slide-gate-operators.html">
<span>Slide Gate Operators</span>
</a>
</li>
</ul>

</li><li class="level0 nav-4 level-top parent">
<a href="http://fastgateopeners.com/store/accessories.html" class="level-top">
<span>Accessories</span>
</a>
<span class="opener">&nbsp;</span>

<ul class="level0" style="display: none;">
<li class="level1 nav-4-1 first">
<a href="http://fastgateopeners.com/store/accessories/barrier-gate-accessories.html">
<span>Barrier Gate Accessories</span>
</a>
</li><li class="level1 nav-4-2">
<a href="http://fastgateopeners.com/store/accessories/entry-systems-and-devices.html">
<span>Entry Systems &amp; Devices</span>
</a>
</li><li class="level1 nav-4-3 last">
<a href="http://fastgateopeners.com/store/accessories/electrical-and-hardware.html">
<span>Electrical &amp; Hardware</span>
</a>
</li>
</ul>

</li><li class="level0 nav-5 level-top">
<a href="http://fastgateopeners.com/store/parts.html" class="level-top">
<span>FAAC Replacement Parts</span>
</a>
</li><li class="level0 nav-6 level-top last parent">
<a href="http://fastgateopeners.com/store/resources.html" class="level-top">
<span>Resources</span>
</a>
<span class="opener">&nbsp;</span>

<ul class="level0" style="display: none;">
<li class="level1 nav-6-1 first">
<a href="http://fastgateopeners.com/store/resources/hawaii-gate-opener-deals.html">
<span>Hawaii Gate Opener Deals</span>
</a>
</li><li class="level1 nav-6-2 last">
<a href="http://fastgateopeners.com/store/resources/virgin-islands-gate-opener-deals.html">
<span>Virgin Islands Gate Opener Deals</span>
</a>
</li>
</ul>

</li>                        
    </ul>
    <ul id="nav" class="grid-full classic mobile">

    <li id="homelink-icon" class="level0 level-top">
    <a class="level-top feature feature-icon-hover" href="http://fastgateopeners.com/store/"><span class="icon i-home-w force-no-bg-color"></span></a>
            </li>
<li class="level0 nav-7 level-top first">
<a href="http://fastgateopeners.com/store/mhome.html" class="level-top">
<span>Home</span>
</a>
</li><li class="level0 nav-8 level-top">
<a href="http://fastgateopeners.com/store/low-voltage-operators.html" class="level-top">
<span>Low Voltage Operators</span>
</a>
</li><li class="level0 nav-9 active level-top parent">
<a href="http://fastgateopeners.com/store/conventional-operators.html" class="level-top">
<span>Conventional Operators</span><span class="caret">&nbsp;</span>
</a>

<ul class="level0">
<li class="level1 nav-9-1 first">
<a href="http://fastgateopeners.com/store/conventional-operators/swing-gate-operators.html">
<span>Swing Gate Operators</span>
</a>
</li><li class="level1 nav-9-2">
<a href="http://fastgateopeners.com/store/conventional-operators/barrier-gate-operators.html">
<span>Barrier Gate Operators</span>
</a>
</li><li class="level1 nav-9-3 last">
<a href="http://fastgateopeners.com/store/conventional-operators/slide-gate-operators.html">
<span>Slide Gate Operators</span>
</a>
</li>
</ul>

</li><li class="level0 nav-10 level-top parent">
<a href="http://fastgateopeners.com/store/accessories.html" class="level-top">
<span>Accessories</span><span class="caret">&nbsp;</span>
</a>

<ul class="level0">
<li class="level1 nav-10-1 first">
<a href="http://fastgateopeners.com/store/accessories/barrier-gate-accessories.html">
<span>Barrier Gate Accessories</span>
</a>
</li><li class="level1 nav-10-2">
<a href="http://fastgateopeners.com/store/accessories/entry-systems-and-devices.html">
<span>Entry Systems &amp; Devices</span>
</a>
</li><li class="level1 nav-10-3 last">
<a href="http://fastgateopeners.com/store/accessories/electrical-and-hardware.html">
<span>Electrical &amp; Hardware</span>
</a>
</li>
</ul>

</li><li class="level0 nav-11 level-top">
<a href="http://fastgateopeners.com/store/parts.html" class="level-top">
<span>FAAC Replacement Parts</span>
</a>
</li><li class="level0 nav-12 level-top last parent">
<a href="http://fastgateopeners.com/store/resources.html" class="level-top">
<span>Resources</span><span class="caret">&nbsp;</span>
</a>

<ul class="level0">
<li class="level1 nav-12-1 first">
<a href="http://fastgateopeners.com/store/resources/hawaii-gate-opener-deals.html">
<span>Hawaii Gate Opener Deals</span>
</a>
</li><li class="level1 nav-12-2 last">
<a href="http://fastgateopeners.com/store/resources/virgin-islands-gate-opener-deals.html">
<span>Virgin Islands Gate Opener Deals</span>
</a>
</li>
</ul>

</li>

如果有人有移动开发设备，网址是http://fastgateopeners.com

【问题讨论】：

标签： jquery magento

【解决方案1】：

解决这个问题的简单方法是，您可以为菜单标题上的单击事件添加一个回调函数，并阻止其上的默认事件。然后调用函数来拉/推菜单向下/向上

  jQuery('.parent a.level-top').on('click', function (event) {
    event.preventDefault();
    event.stopPropagation();
    //sync the menu clicks by calling the '+/-' symbols click event
    jQuery(this).parent().find('span.opener').click();
 });

现场演示： http://jsfiddle.net/dreamweiver/LtzZz/22/

快乐编码:)

【讨论】：

这会一直走到最后吗？对不起，我还在学习 javascript。 =|此外，我将替换为有孩子的 li 的类，即“.parent”，它仍然单击链接。嗯。对不起。试图弄清楚这一点，我非常感谢您的指导。
@Xander：你能创建 jsfiddle，jsfiddle.net。我会在那里修复它
@xander: 你能在event.stopPropagation(),$(this).find('ul li').slideToggle();之后添加这段代码