JQuery的：在下拉菜单链接无法点击

The Wikipedia button isn't clickable JQuery的：在下拉菜单链接无法点击

我的问题是，在下拉菜单里面的维基百科链接无法点击。我已经尝试用stopPropagation（）修复问题;但它不起作用。

HTML：

<section id="help_advanced_rules_section"> 
       <div class="bar_bottom_left"></div> 
       <div class="bar_mid" id="bar_mid_7"><h3>8. Rules</h3></div> 
       <div class="bar_bottom_right"></div> 
       <div class="bar_ear" id="bar_ear_7"></div> 
       <article id="article_7"> 
        <div class="image_section"> 
        <img src="images/help_1.png" id="image_7"> 
        </div> 
        <div class="text_section"> 
         <p>Look up the rules on Wikipedia.</p> 
         <p><a href="http://google.de"><img src="images/wikipedia_en.png" id="wikipedia"></a></p>  
        </div> 

       </article> 
    </section>

JQUERY：

<script> 
     function closeArticle(article) { 


      article.css("paddingTop", "0px"); 
      article.css("paddingBottom", "0px"); 
      article.animate({maxHeight: "1.2em"}, 200, function() { 
       article.children().css("display", "none");      
      }); 
      article.removeClass('expanded'); 

     } 

     function openArticle(article) { 
      closeAllArticle(); 
      article.children().css("display", "block"); 
      article.css("paddingTop", "1em"); 
      article.css("paddingBottom", "0.5em"); 
      article.animate({maxHeight: "2000px"}, 250, function() { 
       article.animate({maxHeight: article.height() + "px"}, 0); //maxheight wird auf die höhe gesetzt die das element nach dem ausfahren hat um die animation danach zu verkürzen 

       article.addClass('expanded'); 
       $('html, body').animate({scrollTop: article.offset().top - 40 
                }, 100); 
      }); 


     } 

     function closeAllArticle() { 
      $('.expanded').each(function(){ 
       closeArticle($(this)); 
      }); 

     } 
     function openCloseArticle(article) { 

      if(article.hasClass('expanded')) 
      { 
       closeArticle(article); 
      } 
      else 
      { 
       openArticle(article); 
      } 
     } 
     $(document).ready(function() {   
      var toggle = function(id, element_name) { 
            //Get ArticleID 
       var toRemove = element_name; 
       var number = id.replace(toRemove, ''); 

       var articleID = "#article_"+number; 
       var article = $(articleID); 

       openCloseArticle(article) 
      }; 

      $(".bar_mid").click (function() { 
       toggle($(this).attr("id"), "bar_mid_"); 
      }); 

      $(".bar_ear").click (function() { 
       toggle($(this).attr("id"), "bar_ear_"); 
      }); 


     }); 


     </script>

我尝试了许多不同的方式与stopPropagation（）;但它没有工作。也许我只是不明白它是如何工作的，或者我需要以另一种方式解决我的问题。

那么使维基百科按钮可点击的最佳方式是什么？

来源

2013-10-01 Stefan Gi

你可以添加一个jsFiddle吗？ –

http://jsfiddle.net/TNTzg/ 布局不像真正的那个，但功能是。非常感谢您的帮助:) –

我没有找到您的错误。但是也许你可以尝试用Bootstrap上存在的手风琴，然后像你想要的那样风格化。我认为你的代码没有优化。这很棒，因为如果我把文章分为几个部分，我可以看到你的链接工作。 –

http://jsfiddle.net/TNTzg/1/

的问题是在z-index:-1在article CSS规则。文章区块实际上位于区块的后面。您可以通过右键单击您的链接并选择“检查元素”，发现问题所在。它将打开选定鼠标光标下最顶端元素的开发人员工具。

来源

2013-10-01 09:26:23 pckill

JQuery的：在下拉菜单链接无法点击

回答

相关问题