Jquery幻灯片菜单切换

时间：2017-05-23 02:49:53

标签： javascript jquery html css

我正在尝试使用jquery构建一个幻灯片导入/导出导航菜单，但我遇到了一个问题。如果我点击'fa-bars'图标，只有那个，一切都很顺利。但是，当我单击“fa-times”图标以关闭导航菜单（我希望它这样做）时，它可以按照需要工作，但是“fa-bars”图标不再可以点击以重新打开菜单。我知道它与我的JS代码有关，但我无法破解它。

body {
overflow-x: hidden;
}

ul {
list-style: none;
margin-top: 0px;
padding: 0;
}

li {
font-size: 30px;
color: black;
}

.fa-bars {
position: static;
left: 100px;
top: 10px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}

.fa-bars:hover {
opacity: 0.7;
}

.fa-times {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}

.fa-times:hover {
opacity: 0.7;
}

nav {
background-color: lightslategrey;
width: 250px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1;
transform: translate3d(-250px, 0, 0);
transition: all 0.5s ease-in-out;
}

.active-nav {
transform: translate3d(0,0,0);
}

.closed-nav {
transform: translate3d(-250px, 0, 0);
}
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>

<nav>
    
    <ul>
        <i class="fa fa-times fa-2x"></i>
        <li>New TO</li>
        <li>Street TO</li>
        <li>Classy TO</li>
        <li>Athletic TO</li>
    </ul>

</nav>

JS:

$(function () {

$('.fa-bars').click(function () {
    $('nav').toggleClass('active-nav');
});

$('.fa-times').click(function() {
    $('.active-nav').toggleClass('closed-nav');
});

});

https://jsfiddle.net/sdvb45nj/

2 个答案:

答案 0 :(得分：3)

单击关闭按钮

时会出现问题

$('.active-nav').toggleClass('closed-nav');

使用上面的代码，您会将closed-nav添加到nav，这将关闭...之后您使用

$('nav').toggleClass('active-nav');

使用上述代码，您可以active-nav从nav移除closed-nav，而closed-nav仍在

因此您需要删除active-nav课程并添加$('nav').removeClass('closed-nav').addClass('active-nav'); ..

要解决这个问题，你可以使用

$('nav').toggleClass('active-nav');

而不是

$(function () {
    
    $('.fa-bars').click(function () {
        $('nav').removeClass('closed-nav').addClass('active-nav');
    });
    
    $('.fa-times').click(function() {
        $('.active-nav').toggleClass('closed-nav');
    });
    
});

body {
    overflow-x: hidden;
}

ul {
    list-style: none;
    margin-top: 0px;
    padding: 0;
}

li {
    font-size: 30px;
    color: black;
}

.fa-bars {
    position: static;
    left: 100px;
    top: 10px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.fa-bars:hover {
    opacity: 0.7;
}

.fa-times {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.fa-times:hover {
    opacity: 0.7;
}

nav {
    background-color: lightslategrey;
    width: 250px;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1;
    transform: translate3d(-250px, 0, 0);
    transition: all 0.5s ease-in-out;
}

.active-nav {
    transform: translate3d(0,0,0);
}

.closed-nav {
    transform: translate3d(-250px, 0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
    
    <nav>
        
        <ul>
            <i class="fa fa-times fa-2x"></i>
            <li>New TO</li>
            <li>Street TO</li>
            <li>Classy TO</li>
            <li>Athletic TO</li>
        </ul>

    </nav>
SELECT  M.MATERIAL, 
        M.MATERIAL_DESCRIPTION,
        M.MATERIAL_AVAILABILITY_DATE,
        SUM(CASE WHEN M.REQUIREMENT_TYPE = 'PB' THEN M.QUANTITY ELSE 0 END) AS 'SUM_FCST',
        SUM(CASE WHEN M.REQUIREMENT_TYPE IN('01','04','KE') THEN M.QUANTITY ELSE 0 END) AS 'SUM_ORDERS',
        A.Product_Division, 
        A.BU_Group, 
        A.Business_Segment,
        A.Gender


FROM   VW_MRP_ALLOCATION M 
LEFT OUTER JOIN   vw_Article_Attributes A ON M.MATERIAL = A.Article

WHERE  M.REQUIREMENT_CATEGORY IN ('A60381000', 'A60382000')
AND    M.MATERIAL_AVAILABILITY_DATE BETWEEN GETDATE() AND GETDATE() + 90
AND    M.MATERIAL IN ('AA2721',
'AA2723',
'AA5205',
'AA5206',
'AA5207',
'AA5208',
'AA5209',
'AA5210',
'AB3120',
'AB3121',
'AB3131',
'AC5234',
'AC5235',
'AC5236',
'AC5237',
'AC5254',
'AC5256',
'AH9802',
'AH9803',
'AH9804',
'AI3331',
'AI6206',
'AJ5837',
'AJ5838',
'AJ5839',
'AJ5840',
'AJ5841',
'AJ5842',
'AJ5844',
'AJ5846',
'AJ5863',
'AJ5867',
'AJ5869',
'AJ5871',
'AJ5879',
'AJ5880',
'AJ5881',
'AJ5882',
'AJ5883',
'AJ5892',
'AJ5893',
'AJ5894',
'AJ5895',
'AJ5898',
'AJ5899',
'AJ5900',
'AJ5901',
'AJ5915',
'AJ5916',
'AJ5919',
'AN9829',
'AN9848',
'AN9854',
'AN9855',
'AO1612',
'AO1855',
'AP0354',
'AP0356',
'AP0364',
'AP0365',
'AP0366',
'AP0529',
'AP0530',
'AP0531',
'AP0534',
'AP0535',
'AP0536',
'AP0537',
'AP0540',
'AP0541',
'AP0543',
'AP0544',
'AP0545',
'AP0548',
'AP0549',
'AP0551',
'AP0552',
'AP0553',
'AP0554',
'AP0558',
'AP1855',
'AP1856',
'AP1857',
'AP1858',
'AP1859',
'AP1860',
'AP1861',
'AP1862',
'AP1863',
'AP1864',
'AP1865',
'AP1866',
'AP1867',
'AP1868',
'AP1869',
'AP1870',
'AP1871',
'AP1872',
'AP1873',
'AP1874',
'AP1875',
'AP1876',
'AP1877',
'AP1878',
'AP4362',
'AP4363',
'AP4364',
'AP4365',
'AP4366',
'AP4367',
'AP4980',
'AP4981',
'AP4982',
'AP4983',
'AP5204',
'AP5205',
'AP5206',
'AP5207',
'AP5208',
'AP5209',
'AP5210',
'AP5211',
'AP5212',
'AP5648',
'AP5649',
'AP5650',
'AP5651',
'AP5652',
'AX6087',
'AX7043',
'AY1795',
'AY1796',
'AY1839',
'AY2858',
'AY2859',
'AY2867',
'AY2868',
'AY2879',
'AY2881',
'AY2883',
'AY2885',
'AY2886',
'AY2888',
'AY2889',
'AY2890',
'AY2896',
'AY2898',
'AY2983',
'AY2984',
'AZ5389',
'AZ5390',
'AZ5395',
'AZ5396',
'AZ5398',
'AZ5400',
'AZ5402',
'AZ5406',
'B43242',
'B43243',
'B43244',
'B43245',
'B43246',
'B45108',
'B45109',
'B45110',
'B45112',
'B45113',
'BJ9093',
'BJ9095',
'BJ9096',
'BJ9097',
'BJ9098',
'BJ9103',
'BJ9110',
'BJ9111',
'BJ9112',
'BJ9113',
'BJ9114',
'BJ9121',
'BJ9126',
'BJ9127',
'BJ9128',
'BJ9129',
'BJ9131',
'BJ9137',
'BJ9143',
'BJ9144',
'BJ9145',
'BJ9147',
'BJ9148',
'BJ9152',
'BJ9161',
'BJ9163',
'BJ9164',
'BJ9165',
'BJ9166',
'BJ9171',
'BJ9173',
'BJ9174',
'BJ9176',
'BJ9177',
'BJ9179',
'BJ9185',
'BJ9186',
'BJ9189',
'BJ9192',
'BJ9194',
'BJ9195',
'BJ9196',
'BJ9197',
'BJ9198',
'BJ9200',
'BJ9201',
'BJ9202',
'BJ9203',
'BJ9205',
'BJ9206',
'BJ9207',
'BJ9226',
'BJ9228',
'BJ9229',
'BJ9231',
'BJ9294',
'BJ9296',
'BK0292',
'BK0293',
'BK0348',
'BK0350',
'BK0351',
'BK0387',
'BK4765',
'BK4766',
'BK4771',
'BK4772',
'BK4773',
'BK4774',
'BK4775',
'BK4776',
'BK4777',
'BK4778',
'BK4779',
'BK4780',
'BK4781',
'BK4782',
'BK5154',
'BK5428',
'BK5434',
'BK5435',
'BK5437',
'BK5438',
'BK5439',
'BK5444',
'BP5424',
'BP6019',
'BP6022',
'BQ2622',
'BQ2626',
'BQ2628',
'BQ2631',
'BQ2633',
'BQ2634',
'BQ2718',
'BQ2719',
'BQ2722',
'BQ2724',
'BQ2729',
'BQ2730',
'BQ2741',
'BQ2748',
'BQ2749',
'BQ2751',
'BQ2763',
'BQ2765',
'BQ2768',
'BQ2801',
'BQ2806',
'BQ2810',
'BQ2814',
'BQ2815',
'BQ6500',
'BQ7077',
'BQ8196',
'BQ8199',
'BQ8201',
'BQ8243',
'BQ8245',
'BQ8248',
'BR1977',
'BR2701',
'BR2704',
'BR2707',
'BS0042',
'BS0047',
'BS4211',
'BS4212',
'BS4213',
'BS4215',
'BS4216',
'BS4217',
'BS4219',
'BS4224',
'BS4225',
'BS4227',
'BS4228',
'BS4229',
'BS4231',
'BS4232',
'BS4235',
'BS4236',
'BS4237',
'BS4239',
'BS4240',
'BS4241',
'BS4242',
'BS4250',
'BS4252',
'BS4253',
'BS4254',
'BS4256',
'BS4257',
'BS4258',
'BS4260',
'BS4261',
'BS4262',
'BS4264',
'BS4265',
'BS4266',
'BS4268',
'BS4269',
'BS4270',
'BS4271',
'BS4273',
'BS4274',
'BS4275',
'BS4277',
'D84856',
'F82133',
'F82134',
'F82135',
'M35339',
'M35340',
'M35341',
'M64058',
'M64059',
'M64060',
'S04518',
'S05722',
'S05723',
'S05724',
'S05725',
'S05726',
'S05727',
'S05728',
'S05730',
'S05731',
'S05732',
'S05733',
'S05747',
'S05748',
'S05749',
'S05750',
'S05751',
'S05752',
'S05753',
'S05755',
'S05756',
'S05757',
'S05758',
'S16146',
'S16147',
'S16148',
'S16149',
'S16150',
'S16151',
'S16152',
'S16153',
'S16154',
'S16155',
'S16158',
'S16159',
'S16160',
'S16161',
'S16163',
'S16164',
'S17209',
'S17210',
'S17211',
'S17212',
'S17298',
'S17299',
'S17300',
'S17301',
'S17302',
'S17303',
'S17304',
'S17305',
'S17306',
'S17307',
'S17308',
'S17309',
'S17310',
'S17311',
'S17313',
'S17314',
'S22316',
'S22317',
'S22318',
'S22325',
'S22326',
'S22327',
'S22328',
'S22329',
'S22330',
'S22334',
'S22336',
'S22352',
'S22353',
'S22354',
'S22355',
'S22357',
'S22362',
'S22363',
'S22364',
'S22365',
'S22367',
'S22374',
'S22375',
'S22376',
'S22377',
'S22378',
'S22410',
'S22411',
'S22412',
'S22413',
'S22414',
'S29426',
'S29427',
'S29428',
'S29429',
'S29430',
'S86552',
'S86553',
'S86554',
'S86555',
'S86556',
'S86557',
'S86558',
'S86560',
'S86561',
'S86562',
'S86563',
'S86564',
'S86565',
'S86566',
'S86567',
'S86568',
'S86569',
'S86570',
'S86572',
'S86573',
'S86574',
'S86575',
'S92430',
'S92431',
'S92432',
'S92433',
'S92434',
'S92435',
'S92436',
'S92438',
'S92439',
'S92440',
'S92441',
'S92445',
'S92446',
'S92447',
'S92448',
'S92449',
'S92450',
'S92451',
'S92453',
'S92454',
'S92455',
'S92456',
'S93552',
'S93557',
'S96976',
'S96978',
'S99143',
'S99144',
'S99145',
'S99146',
'S99147',
'S99148',
'S99149',
'S99150',
'S99151',
'S99152',
'S99153',
'S99154',
'S99155',
'Z11471',
'Z11474',
'Z11475',
'CD8414',
'CF1045',
'CF1042',
'CF1046',
'CE9563',
'CE9755',
'CD8374',
'CF1047',
'CD8382',
'CF1039',
'CF1049',
'CE9564',
'CD8358',
'CF1044',
'CD8430',
'CE9758',
'CF1036',
'CF1043',
'CF1041',
'CF1038',
'CE9756',
'CF1050',
'CE9759',
'CD8390',
'CD8438',
'CF1037',
'CF1035',
'CD8366',
'CE9565',
'CD8398',
'Z87549')

GROUP BY M.MATERIAL, 
         M.MATERIAL_DESCRIPTION,
         M.MATERIAL_AVAILABILITY_DATE,
         A.BU_Group, 
         A.Business_Segment,
         A.Gender,
         A.Product_Division



ORDER BY M.MATERIAL,
         M.MATERIAL_AVAILABILITY_DATE

答案 1 :(得分：1)

正在调用您的事件处理程序，但是您正在切换错误的类，以下内容解决了这个问题。

$('.fa-bars').click(function () {
    $('nav').toggleClass('active-nav');
});

$('.fa-times').click(function() {
    $('.active-nav').toggleClass('active-nav');
});
相关问题
最新问题