JQuery：下拉列表中的链接无法点击

Question

我的问题是下拉列表中的Wikipedia-Link无法点击。 我已经尝试用stopPropagation（）修复问题;但它不起作用。

JsFiddle

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（）尝试了很多不同的方法;但它没有用。 也许我只是不知道它是如何工作的，或者我需要以另一种方式解决我的问题。

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

Answer 1

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

问题发生在z-index:-1 css规则的article中。文章块实际上是在块区块后面。您可以通过右键单击chrome中的链接并选择“Inspect Element”来发现这是问题所在。它将打开开发人员工具，选择鼠标光标下的最顶层元素。