drop-down-menu - jquery切换菜单异常

Question

我有两个下拉隐藏菜单，即菜单 A 和菜单 B，当您分别单击链接 A 和 B 时，它们会显示，反之亦然，当您单击正文中的任何位置时，它们也会消失。我遇到的问题是，当我单击链接 B 而链接 A 仍处于激活状态时，菜单 A 保持打开状态而不是关闭，这会导致许多并发症。不知道我做错了什么。

您可以在 jsFiddle demo 查看代码

或者这是正在使用的代码；

html;

<ul>
<li id="tabs" class="notification">
<a>Click for Notification</a>
<div id="notification">
<h3>Your Notifications</h3>
<p>Notification #1</p>
<p>Notification #2</p>
<p>Notification #3</p>
<p>Notification #4</p>
<p>Notification #5</p>
<p>Notification #6</p>
</div>
</li>


<li id="tabs" class="latest">
<a>Click for Latest News</a>
<div id="latest">
<h3>Your Latest News</h3>
<p>News #1</p>
<p>News #2</p>
<p>News #3</p>
<p>Notification #4</p>
<p>News #5</p>
<p>News #6</p>
</div>
</li>
</ul>

jquery;

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

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

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


$(function() {
            $("li#tabs.latest a").click(function(e) {
                $("#latest").toggle().toggleClass("active");
                $('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();
            });
        });

Answer 1

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

$(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();
        });
    });

我真的建议重新考虑解决方案，因为如果你有很多选项卡，那么你最终会得到大量的重复代码。

例如:当单击标题时，它将显示其中的元素并隐藏所有其他元素。那么它就不必像现在使用 #notification 和 #latest

那样知道 div 的 Id 是什么。