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

那么，使Wikipedia-Button可点击的最佳方法是什么？

Answer 1

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

问题出在article css规则中的z-index:-1中。 article块实际上位于section块的后面。 通过右键单击chrome中的链接并选择“检查元素”，可以发现这是问题所在。 它将使用选定的鼠标光标下方的最高元素打开开发人员工具。