jQuery切换菜单项和表

时间:2015-03-23 09:40:09

标签: javascript jquery

我编写的代码效果非常好,但不幸的是它并不是完美的功能。我将简要介绍一下这个动作: 当我点击' .navbar-nav li a'父母和' .sheets,.sheetsBg'得到活跃的课程。 如果我再次点击' .navbar-nav li a'仅适用于菜单项父类。

代码:

function manageSheetsToggle() {

var navMenuItem = '.navbar-nav li a';

$(navMenuItem).click(function (e) {
    if (!isTabletResolution() && !isPhoneResolution()) {
        {
            var sheetId = $(this).parent().data('target');

            if ($('.sheets, .sheetsBg').hasClass('active')) {
                $('.sheets, .sheetsBg').removeClass('active');
            }
            e.preventDefault();
            $(this).parent().toggleClass('active').siblings().removeClass('active');
            $("#" + sheetId).toggleClass('active').siblings().removeClass('active');
            $(".sheets, .sheetsBg").addClass("active");
        }
    } else {
        $(navMenuItem).click(function (e) {
                e.preventDefault();
                location.href = $(this).attr('href');
            }
        );
    }
});

$('.sheetsBg, .corpoBelt, .header').click(function () {
    $(".sheets, .sheetsBg").removeClass("active");
});
}

请帮助。

2 个答案:

答案 0 :(得分:0)

我认为您可以更轻松地使用siblings()选择器

https://jsfiddle.net/2q50kj3a/1/

答案 1 :(得分:0)

我希望这就是你要找的东西。我稍微更改了你的代码,但它现在工作正常。试一试,让我知道

   <script type="text/javascript">
        var sheet, ln, cn = 0;
        $(document).ready(function () {
            $("#toggleMenu").find("a").on("click", function (e) {
                ln = $(this);
                sheet = ln.parent().data('target');
                $("#" + sheet).toggleClass("active").siblings().removeClass('active');
                $(".sheets").find("section").each(function () {
                    if ($(this).hasClass("active"))
                        cn++;
                });
                if (cn) {
                    $(".sheets").addClass('active');
                    cn = 0;
                } else
                    $(".sheets").removeClass('active');
            });
            $('.corpoBelt').click(function () {
                $(".sheets").removeClass("active");
            });
        });
    </script>