鏈接不工作

這是jQuery的功能，我用它來打開撥動了UL，但點擊時它裏面的鏈接，他們不去的頁面，但關閉UL容器鏈接不工作

jQuery('#app-main-4059').addClass('open'); 
jQuery('#app-main-4059').click(function() { 
    if (jQuery(this).hasClass('open')) { 
     jQuery(this).removeClass('open'); 
     jQuery(this).addClass('close'); 
     jQuery('#app-main-4059 > ul').slideDown(100); 
     return false; 
    } else { 
     jQuery(this).removeClass('close'); 
     jQuery(this).addClass('open'); 
     jQuery('#app-main-4059 > ul').slideUp(100); 
     return false; 
    }   
});

這是HTML：

<li class="has-submenu close" id="app-main-4059"> 
    <span class="menu-item-wrap no_icon"> 
     <a href="#" style=""><span class="link-text">FEATURES</span></a> 
    </span> 
    <div class="under"></div> 
    <ul style="display: block; overflow: hidden;"> 
     <li id="app-main-3383"><span class="menu-item-wrap"><a href="http://appfessional.com/new/camps/" style=""><span class="link-text">Camps</span></a></span></li> 
     <li id="app-main-3382"><span class="menu-item-wrap"><a href="http://appfessional.com/new/exercise/" style=""><span class="link-text">Exercise</span></a></span></li> 
     <li id="app-main-3379"><span class="menu-item-wrap"><a href="http://appfessional.com/new/gear/" style=""><span class="link-text">Gear</span></a></span></li> 
     <li id="app-main-2896"><span class="menu-item-wrap"><a href="http://appfessional.com/new/interviews/" style=""><span class="link-text">Interviews</span></a></span></li> 
     <li id="app-main-2890"><span class="menu-item-wrap"><a href="http://appfessional.com/new/news/" style=""><span class="link-text">News</span></a></span></li> 
     <li id="app-main-3381"><span class="menu-item-wrap"><a href="http://appfessional.com/new/nutrition/" style=""><span class="link-text">Nutrition</span></a></span></li> 
     <li id="app-main-3384"><span class="menu-item-wrap"><a href="http://appfessional.com/new/profiles/" style=""><span class="link-text">Profiles</span></a></span></li> 
     <li id="app-main-3378"><span class="menu-item-wrap"><a href="http://appfessional.com/new/style/" style=""><span class="link-text">Style</span></a></span></li> 
     <li id="app-main-3380"><span class="menu-item-wrap"><a href="http://appfessional.com/new/social/" style=""><span class="link-text">Social</span></a></span></li> 
     <li id="app-main-3377"><span class="menu-item-wrap"><a href="http://appfessional.com/new/travel/" style=""><span class="link-text">Travel</span></a></span></li> 
    </ul> 
</li>

來源

2013-08-16 Xhevat Ziberi

你需要避免觸發事件時中的鏈接它被點擊。（'click'，function（event）{event.stopPropagation（）;}）'.REF：http：//api.jquery.com/event.stopPropagation/ – dreamweiver

謝謝你工作;） –

發生了什麼叫做「事件冒泡」。請參閱：What is event bubbling and capturing?

您可以使用stopPropagation()方法在jquery中停止此行爲。請參閱：http://api.jquery.com/event.stopPropagation/

代碼示例：

jQuery('#app-main-4059').addClass('open'); 
jQuery('#app-main-4059').click(function(event) { 
    event.stopPropagation(); 
    if (jQuery(this).hasClass('open')) { 
     jQuery(this).removeClass('open'); 
     jQuery(this).addClass('close'); 
     jQuery('#app-main-4059 > ul').slideDown(100); 
     return false; 
    } else { 
     jQuery(this).removeClass('close'); 
     jQuery(this).addClass('open'); 
     jQuery('#app-main-4059 > ul').slideUp(100); 
     return false; 
    }   
});

來源

2013-08-16 11:26:00

這並沒有解決這個問題。問題在於事件傳播已停止，因此鏈接未被遵循。 OP需要不停止事件傳播。 – cfs

嘗試使用event.target，在這裏你需要寫一些條件「特色」

jQuery('#app-main-4059').addClass('open'); 
jQuery('#app-main-4059').click(function(event) { 
var target = jQuery(event.target); 
if(target.is("li")) { 
    if (jQuery(this).hasClass('open')) { 
     jQuery(this).removeClass('open'); 
     jQuery(this).addClass('close'); 
     jQuery('#app-main-4059 > ul').slideDown(100); 
     return false; 
    } else { 
     jQuery(this).removeClass('close'); 
     jQuery(this).addClass('open'); 
     jQuery('#app-main-4059 > ul').slideUp(100); 
     return false; 
    }  
}  
});

來源

2013-08-16 11:35:44

回答

相關問題