javascript - jQuery Sidebar Sliding Menu - 将按钮链接到特定幻灯片，每个链接都没有重复功能

标签 javascript jquery html css sidebar

我在 JSFiddle 中制作的侧边栏菜单:https://jsfiddle.net/jvp2h1am/ .

应该相当简单。如何重构我的 JS 以显示所单击按钮的幻灯片/子菜单，而无需为每个按钮创建单独的功能？

此外，我怎样才能做到在通过单击按钮打开其中一个菜单时关闭当前打开的子菜单？示例:个人菜单打开，点击商务按钮打开商务菜单，个人菜单也同样关闭。

HTML:

<div id="sidebarPrimary">

        <ul id="sidebarPrimaryNav">

            <li class="navButton"><a href="#" target="blank_">JA</a></li>

            <li id="homeButton" class="navButton active"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-home"></span>Home

                </div>

            </a></li>

            <li id="personalButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-user"></span>Personal

                </div>

            </a></li>

            <li id="businessButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-briefcase"></span>Business

                </div>

            </a></li>

            <li id="invoicesButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-gbp"></span>Invoices

                </div>

            </a></li>

            <li id="contactsButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-address-book"></span>Contacts

                </div>

            </a></li>

            <li id="expensesButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-minus"></span>Expenses

                </div>

            </a></li>

            <li id="payslipsButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-list"></span>Payslips

                </div>

            </a></li>

        </ul>

    </div>

    <div id="personalMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

    <div id="businessMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

    <div id="invoicesMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

    <div id="contactsMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

    <div id="expensesMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

    <div id="payslipsMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

JS:

$(document).ready(function() {

$('#personalButton').click(function() {

    $('#personalMenu').toggleClass('open');

});

$('#businessButton').click(function() {

    $('#businessMenu').toggleClass('open');

});

$('#invoicesButton').click(function() {

    $('#invoicesMenu').toggleClass('open');

});

$('#contactsButton').click(function() {

    $('#contactsMenu').toggleClass('open');

});

$('#expensesButton').click(function() {

    $('#expensesMenu').toggleClass('open');

});

$('#payslipsButton').click(function() {

    $('#payslipsMenu').toggleClass('open');

});

})

最佳答案 

$(document).ready(function() {
    
    $('.navButton').click(function() {
        
        $('#'+$(this).attr('show-id')).toggleClass('open');
        
    });
   
})
/* 
COLOUR PALETTE 
sidebar primary background: #2F323E;
sidebar secondary background: #262A34;
page primary background: #fff;
page secondary background: #F4F7FA;
subdued text: #687381;
primary text: #445165;
secondary text: #C0C7D1;
*/

/* GENERAL TEXT STYLING */

::selection 
{
	background: #2d2d2d;
	color: #fff;
}

::-moz-selection 
{
	background: #2d2d2d;
	color:#fff;
}

::-webkit-selection 
{
	background: #2d2d2d;
	color:#fff;
}

a, p, input, textarea, h1, h2, h3, h4, ul > li
{
    color: #445165;
}

a, p, input, textarea, ul > li
{
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4
{
    font-family: 'Montserrat', sans-serif;
}

h1, h2
{
    font-weight: 700;
}

a
{
    transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -webkit-transition: 0.1s ease;
}

a:focus
{
    text-decoration: none;
}

a:hover
{
    text-decoration: none;
}

p
{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

a.button
{
    padding: 10px 25px;
    color: #fff;
    background: #26BB87;
    border: none;
    border-radius: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
}

a.button > span
{
    margin-right: 10px;
    transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
}

a.button:hover
{
    background: #1a7f5c;
}


/* GENERAL LAYOUT */

html, body 
{
    padding: 0;
    margin: 0;
    background-color: #fff;
}


/* SIDEBAR PRIMARY */

#sidebarPrimary
{
    position: fixed;
    width: 5vw;
    height: 100%;
    top: 0;
    left: 0;
    background: #2F323E;
    z-index: 99;
}

#sidebarPrimary > ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#sidebarPrimary > ul > li.navButton
{
    width: 100%;
    height: 5vw;
}

#sidebarPrimary > ul > li.navButton:first-of-type > a,
#sidebarPrimary > ul > li.navButton:first-of-type > a:focus
{
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', 'Open Sans', sans-serif;
}

#sidebarPrimary > ul > li.navButton > a,
#sidebarPrimary > ul > li.navButton > a:focus
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #687381;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

#sidebarPrimary > ul > li.navButton.active > a
{
    color: #fff;
}

#sidebarPrimary > ul > li.navButton > a:hover
{
    text-decoration: none;
    color: #fff;
    background: #E95656;
}

#sidebarPrimary > ul > li.navButton > a span
{
    display: block;
    text-align: center;
    margin-bottom: 5px;
}


/* SUBMENU */

.submenu
{
    position: fixed;
    min-width: 15vw;
    height: 100%;
    top: 0;
    left: 5vw;
    background: #262A34;
    transform: translateX(-300px);
    transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    z-index: 98;
}

.submenu.open
{
    transform: translateX(0);
}

.submenu.close
{
    transform: translateX(-300px);
}

.submenu > ul.submenuGroup

{
    list-style-type: none;
    margin: 0;
    padding: 25px 0;
    border-bottom: 2px solid #232731;
}

.submenu > ul.submenuGroup:first-of-type
{
    padding-top: 0;
}

.submenu > ul.submenuGroup:last-of-type
{
    border: none;
}

.submenu > ul.submenuGroup > li.navButtonSub
{
    width: 100%;
    height: 50px;
}

.submenu > ul.submenuGroup > li.navButtonSub > a
{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    color: #687381;
    text-decoration: none;
}

.submenu > ul.submenuGroup > li.navButtonSub.active > a
{
    color: #fff;
}

.submenu > ul.submenuGroup > li.navButtonSub > a:hover
{
    color: #fff;
    background: #1D202B;
}


/* MAIN */

main
{
    min-height: 120vh;
    width: 100%;
    padding-left: 5vw;
    background: #F4F7FA;
}


/* TOP NAV */

#topnav
{
    position: fixed;
    height: 5vw;
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    z-index: 95;
}

#topnav > div#topnavLeft
{
    float: left;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 30px;
}

#topnav > div#topnavLeft > a.button
{
    margin-right: 30px;
}

#topnav > ul
{
    margin: 0;
    margin-right: 5vw;
    padding: 0;
    right: 0;
    list-style-type: none;
    height: 100%;
    display: flex;
    align-items: center;
}

#topnav > ul > li.navButton
{
    height: 100%;
    width: 5vw;
}

#topnav > ul > li.navButton > a,
#topnav > ul > li.navButton > a:focus
{
    display: block;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#topnav > ul > li.navButton > a:hover
{
    color: #C0C7D1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body data-ng-app="dashboardApp">

        <div id="sidebarPrimary">
            
            <ul id="sidebarPrimaryNav">
               
                <li class="navButton"><a href="https://www.justaccounts.com/" target="blank_">JA</a></li>
                
                <li id="homeButton" class="navButton active"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-home"></span>Home
                    
                    </div>
                    
                </a></li>
                
                <li show-id="personalMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-user"></span>Personal
                    
                    </div>
                    
                </a></li>
                
                <li show-id="businessMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-briefcase"></span>Business
                    
                    </div>
                    
                </a></li>
                
                <li show-id="invoicesMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-gbp"></span>Invoices
                    
                    </div>
                    
                </a></li>
                
                <li show-id="contactsMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-address-book"></span>Contacts
                    
                    </div>
                    
                </a></li>
                
                <li show-id="expensesMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-minus"></span>Expenses
                    
                    </div>
                    
                </a></li>
                
                <li show-id="payslipsMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-list"></span>Payslips
                    
                    </div>
                    
                </a></li>
                
            </ul>
            
        </div>
        
        <div id="personalMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <div id="businessMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <div id="invoicesMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <div id="contactsMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <div id="expensesMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <div id="payslipsMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <main>
            
            <div id="topnav">
              
                <div id="topnavLeft">
                    
                    <a class="button" href="#"><span class="fa fa-plus"></span>New Invoice</a>
                    
                </div>
                
                <ul>
                    
                    <li class="navButton"><a href="#"><span class="fa fa-lg fa-sign-out"></span></a></li>
                    
                    <li class="navButton"><a href="#"><span class="fa fa-lg fa-question"></span></a></li>
                    
                    <li class="navButton"><a href="#"><span class="fa fa-lg fa-cog"></span></a></li>
                    
                </ul>
                
            </div>
            
            <div id="mainContent">
                
                
                
            </div>
            
        </main>
   
    </body>

请检查代码。 因此，在这段代码中，我没有为每个按钮使用 unique Id，而是使用了 common class 并传递了 attribute show-id 具有 您要显示的列表的 ID。

谢谢，希望对你有帮助

关于javascript - jQuery Sidebar Sliding Menu - 将按钮链接到特定幻灯片，每个链接都没有重复功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43759589/

上一篇：html - 试图将 html 标签拉入我的 Rails 简单形式以拉取 id 标签 css 属性

下一篇：javascript - 按钮中间有一个字形，左上角有数字

相关文章：

javascript - 如何使用正则表达式删除 <p> 标签内的所有 <br/> 标签？

javascript - React 不渲染类

jquery - 被迫使用 jQuery 而不是 $

html - 无法为登录页面设置确切的 css

javascript - 带百分比颜色划分的空心圆

javascript - 如何在 TypeScript 中正确键入 'omit' 函数以避免错误消息？

javascript - 多步形式是到达X步后不进入下一步

javascript - 如何访问外部加载的 svg 文件的 id？

c# - Scrollview 和 Mozilla PDF.js 的滚动错误

html - 填充扩展了 &lt;textarea&gt; 的大小

©2024 IT工具网  联系我们