Question

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

查看代码

或者这是我正在使用的代码;

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

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

例如：点击标题时，它会显示其中的元素并隐藏所有其他元素。那么它就不必知道div的{Id}正如#notification和#latest

那样

jquery切换菜单异常

1 个答案: