jQuery 아코디언 메뉴 - 전체 버튼 클릭 가능

지금 jquery 아코디언 메뉴가 있는데 화면 +을 누를 때 하위 메뉴가 열립니다. +가 아닌 메뉴 옵션을 선택하면 기본 카테고리 페이지로 이동합니다. 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

출처

2014-02-28 Xander

입니다

이 문제를 극복하는 간단한 방법은 클릭 이벤트에 대한 콜백 함수를 메뉴 제목 위에 추가하고 기본 이벤트를 막을 수 있다는 것입니다. 다음 기능/풀 업/다운

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/

해피

출처

2014-02-28 15:21:26 dreamweiver

합니까 그 바로 아래 끝을 향해 가고? 미안 나는 여전히 자바 스크립트를 배우고있다. = | 또한

를 자식이있는 li 클래스로 대체했습니다. 자식 클래스는 ".parent"이며 여전히 링크를 클릭합니다. 음. 죄송합니다. 이것을 알아 내려고, 나는 그 지침을 크게 감사한다. – Xander

@ 잰더 : jsfiddle, jsfiddle.net을 만들 수 있습니까? 나는 거기에 그것을 고칠 것이다 – dreamweiver

@xander : 당신이 그'event.stopPropagation()','$ (this) .find ('ul li') 뒤에이 코드를 추가 할 수 있겠는가? slideToggle();' – dreamweiver

jQuery 아코디언 메뉴 - 전체 버튼 클릭 가능

답변

관련 문제