Javascript JQuery:下拉列表中的链接不可单击

我的问题是下拉列表中的维基百科链接不可点击。 我已经尝试用stopPropagation（）解决了这个问题；但它不起作用

HTML:

8.规则

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>

功能关闭文章（文章）{
第条css（“paddingTop”、“0px”）；
css（“填充底部”、“0px”）；
文章.动画（{maxHeight:“1.2em”}，200，函数（）{
article.children（）.css（“显示”、“无”）；
});
第条removeClass（“扩展”）；
}
函数openArticle（article）{
closeAllArticle（）；
article.children（）.css（“显示”、“块”）；
第条css（“paddingTop”、“1em”）；
第条css（“填充底部”、“0.5em”）；
文章.动画（{maxHeight:“2000px”}，250，函数（）{
article.animate（{maxHeight:article.height（）+“px”}，0）；//maxHeight将为元素添加动画元素
第条addClass（“扩展”）；
$（'html，body'）.animate（{scrollTop:article.offset（）.top-40
}, 100);
});
}
函数closeAllArticle（）{
$（'.expanded'）。每个（函数（）{
closeArticle（$（本））；
});
}
函数openCloseArticle（文章）{
if（article.hasClass（'expanded'））
{
第条（条）；
}
其他的
{
公开文章；
}
}
$（文档）.ready（函数（）{
变量切换=函数（id、元素名称）{
//获取文章ID
var toRemove=元素名称；
变量编号=id.replace（删除“”）；
var articleID=“#article_”+编号；
var article=$（articleID）；
openCloseArticle（文章）
};
$（“.bar_mid”）。单击（函数（）{
切换（$（this.attr（“id”），“bar\u mid”）；
});
$（“.bar_ear”）。单击（函数（）{
切换（$（this.attr（“id”），“bar_ear”）；
});
});

我尝试了很多不同的停止播放的方法（）；但它不起作用。 也许我只是不明白它是如何工作的，或者我需要用另一种方式解决我的问题

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

---

问题出在

z-index:-1

中的

article

css规则中。文章块实际上位于节块后面。通过右键单击chrome中的链接并选择“Inspect Element”，您可以发现这就是问题所在。它将打开开发工具，并选择鼠标光标下的最上面的元素。

您可以添加JSFIDLE吗？布局与实际不同，但功能不同。非常感谢你的帮助：）我没有发现你的错误。但也许你可以试着用一个手风琴，它存在于引导程序中，然后像你想的那样进行风格化。我认为你的代码没有优化。这很奇怪，因为如果我把文章的一个div实例放进去，我可以看到你的链接是有效的。。

<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>