jQuery切换菜单异常

Question

我有两个隐藏的下拉菜单，即菜单A和菜单B，分别在单击链接A和B时显示，反之亦然，当您单击身体的任何位置时也消失。 我遇到的问题是，当我仍在激活链接A​​的同时单击链接B时，菜单A保持打开而不是关闭，这会带来很多麻烦。 邓诺我在做什么错。

您可以在jsFiddle演示中查看代码

或者这是代码正在使用；

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是什么