Drop down menu jquery切换菜单异常

我有两个下拉隐藏菜单，即菜单A和菜单B，当你分别点击链接A和B时显示，反之亦然，当你点击身体的任何地方时也会消失。我遇到的问题是，当我点击链接B，而链接A仍处于激活状态时，菜单A保持打开而不是关闭，这会导致许多复杂情况。不知道我做错了什么

您可以在以下位置查看代码：

或者这里是我使用的代码

html

---

我认为问题在于显示和隐藏正确的内容

$(function() {
        $("li#tabs.notification a").click(function(e) {
            $("#notification").toggle().toggleClass("active");
            $('#latest').hide();
            $('#notification').show();  
            $('li#tabs a').removeClass('selected');
            $(this).addClass('selected');
            e.stopPropagation();
        });

        $(document).click(function(e) {
            $('#notification').hide().removeClass('active');
            $('#latest').hide();              
            $('li#tabs a').removeClass('selected');
        });

        $("#notification").click(function(e) {
            e.stopPropagation();
        });
    });


    $(function() {
        $("li#tabs.latest a").click(function(e) {
            $("#latest").toggle().toggleClass("active");
            $('#notification').hide();
            $('#latest').show();
            $('li#tabs a').removeClass('selected');
            $(this).addClass('selected');
            e.stopPropagation();
        });

        $(document).click(function(e) {
            $('#latest').hide().removeClass('active');
            $('li#tabs a').removeClass('selected');
        });

        $("#latest").click(function(e) {
            e.stopPropagation();
        });
    });

我真的建议你重新考虑这个解决方案，因为如果你有很多标签，那么你最终会有大量的重复代码

---

例如：单击标题时，它将显示标题内的元素，并隐藏所有其他元素。然后它就不必知道

div的Id是什么了，就像它现在处理
#notification
和
#latest
一样，我认为问题在于显示和隐藏正确的内容

$(function() {
        $("li#tabs.notification a").click(function(e) {
            $("#notification").toggle().toggleClass("active");
            $('#latest').hide();
            $('#notification').show();  
            $('li#tabs a').removeClass('selected');
            $(this).addClass('selected');
            e.stopPropagation();
        });

        $(document).click(function(e) {
            $('#notification').hide().removeClass('active');
            $('#latest').hide();              
            $('li#tabs a').removeClass('selected');
        });

        $("#notification").click(function(e) {
            e.stopPropagation();
        });
    });


    $(function() {
        $("li#tabs.latest a").click(function(e) {
            $("#latest").toggle().toggleClass("active");
            $('#notification').hide();
            $('#latest').show();
            $('li#tabs a').removeClass('selected');
            $(this).addClass('selected');
            e.stopPropagation();
        });

        $(document).click(function(e) {
            $('#latest').hide().removeClass('active');
            $('li#tabs a').removeClass('selected');
        });

        $("#latest").click(function(e) {
            e.stopPropagation();
        });
    });

我真的建议你重新考虑这个解决方案，因为如果你有很多标签，那么你最终会有大量的重复代码

例如：单击标题时，它将显示标题内的元素，并隐藏所有其他元素。这样，它就不必知道
div的Id是什么，就像它现在处理
#notification
一样，
#latest
不能放在
标记之外。这是无效的markup.id属性在页面上必须是唯一的，不要使用它两次：不能放置在
标记之外。这是无效的markup.id属性在页面上必须是唯一的，不要使用它两次：我同意你@Tx3…幸运的是，我只需要两个选项卡就可以使用它，但是你有什么建议吗？对你的脚本进行了一点调整！现在工作得很有魅力。唯一的delimma是你提出的…有几个标签，但现在很酷。我同意你@Tx3…幸运的是，我只需要两个标签就可以了，但是你有什么建议吗？把你的脚本调整了一点，伙计！现在工作得很有魅力。唯一的delimma是你提出的…有几个标签，但现在很酷。
$(function() {
        $("li#tabs.notification a").click(function(e) {
            $("#notification").toggle().toggleClass("active");
            $('#latest').hide();
            $('#notification').show();  
            $('li#tabs a').removeClass('selected');
            $(this).addClass('selected');
            e.stopPropagation();
        });

        $(document).click(function(e) {
            $('#notification').hide().removeClass('active');
            $('#latest').hide();              
            $('li#tabs a').removeClass('selected');
        });

        $("#notification").click(function(e) {
            e.stopPropagation();
        });
    });


    $(function() {
        $("li#tabs.latest a").click(function(e) {
            $("#latest").toggle().toggleClass("active");
            $('#notification').hide();
            $('#latest').show();
            $('li#tabs a').removeClass('selected');
            $(this).addClass('selected');
            e.stopPropagation();
        });

        $(document).click(function(e) {
            $('#latest').hide().removeClass('active');
            $('li#tabs a').removeClass('selected');
        });

        $("#latest").click(function(e) {
            e.stopPropagation();
        });
    });