如何使用几个导航菜单简化网站的jQuery脚本?

时间:2018-07-27 07:38:10

标签: jquery

我有一个简单的网站,其中至少有六个导航栏,它们直接链接到PDF文件。导航栏的数量一直在增长,但是我不想不必继续添加同一行代码来确保在单击另一个下拉菜单时将其关闭。

有没有一种方法可以简化此代码的“ else”组件,在将展开并打开的类添加到所单击的一个导航栏中之前,删除所有展开并打开的类?

<script>
    $(document).ready(function(){
        $("#nav-lls-mobile").html($("#nav-lls-main").html());
        $("#nav-lls-trigger span").click(function(){
            if ($("nav#nav-lls-mobile ul").hasClass("expanded")) {
                $("nav#nav-lls-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $(this).removeClass("open"); 
            } else {
                $("nav#nav-lls-scorecard-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $("#nav-lls-scorecard-trigger span").removeClass("open");
                $("nav#nav-lls-lineup-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $("#nav-lls-lineup-trigger span").removeClass("open");
                $("nav#nav-lls-coordinator-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $("#nav-lls-coordinator-trigger span").removeClass("open");
                $("nav#nav-llb-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $("#nav-llb-trigger span").removeClass("open");
                $("nav#nav-llb-scorecard-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $("#nav-llb-scorecard-trigger span").removeClass("open");
                $("nav#nav-llb-lineup-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $("#nav-llb-lineup-trigger span").removeClass("open");
                $("nav#nav-general-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $("#nav-general-trigger span").removeClass("open");
                $("nav#nav-coordinator-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $("#nav-coordinator-trigger span").removeClass("open");
                $("nav#nav-lls-mobile ul").addClass("expanded").slideDown(250);
                $(this).addClass("open");
            }
        });
    });
</script>

               <div class="banner-label">
    Softball Scorecards
    </div>
    <div id="nav-lls-scorecard-trigger" class="nav-trigger-lls">
        <span>Softball Scorecards</span>
    </div>
    <nav id="nav-lls-scorecard-main" class="nav-main-lls">
        <ul>
            <li><a href="./imports/SoftballScorecard1.pdf">Game 1 Scorecard</a></li>
            <li><a href="./imports/SoftballScorecard2.pdf">Game 2 Scorecard</a></li>
            <li><a href="./imports/SoftballScorecard3.pdf">Game 3 Scorecard</a></li>
            <li><a href="./imports/SoftballScorecard4.pdf">Game 4 Scorecard</a></li>
            <li><a href="./imports/SoftballScorecard5.pdf">Game 5 Scorecard</a></li>
        </ul>
    </nav>
    <nav id="nav-lls-scorecard-mobile" class="nav-mobile-lls"></nav>

移动屏幕截图:1https://i.stack.imgur.com/YBKPs.png  桌面屏幕截图:2https://i.stack.imgur.com/UJSS0.png

0 个答案:

没有答案