Как отключить мое выпадающее меню, когда я нажму на него второй раз?

Я новичок в JavaScript, и я собрал код, который я нашел, чтобы сделать горизонтальный аккордеон, но я не смог его закрыть. В принципе, я не знаю, как включить его.Как отключить мое выпадающее меню, когда я нажму на него второй раз?

$(function() { 

$(".item").on("click", function() { 
    $(this) 
    .next().show().animate({width: "12%"}) 
    (".info").hide() 
    .animate({width: "0"}); 
}); 

});

Вот мой codepen:

http://codepen.io/SideSlaw/pen/zobJYO

источник

2016-12-21 SideSlaw

Возможный дубликат [выпадающее меню с по щелчку тумблера] (http://stackoverflow.com/questions/17388122/drop-down-menu-with-on -click-toggle) – wscourge

Вы пытались использовать 'slideToggle'? –

я использовал tansition вместо animate и переключить класс .active, он удаляет и добавить класс каждый щелчок. и некоторая настройка с помощью css, чтобы сделать переход гладким. смотри пример ниже:

$(function() { 
 

 
    $(".item").on("click", function() { 
 
    $(this) 
 
     .next().toggleClass('active'); 
 
    }); 
 
    
 
});

*{ 
 
    box-sizing: border-box; 
 
} 
 
body{ 
 
    background: white; 
 
    color: #D74F33; 
 
} 
 

 
section { 
 
    width: 1900px; 
 
    margin: 10px auto; 
 
    position: fixed; 
 
    left:-8px; 
 
} 
 
.item{ 
 
    width:9%; 
 
    height: 40px; 
 
    float: left; 
 
    border-right: 3px solid #D74F33; 
 
    font: 20px monospace; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    background-color: #333; 
 
    transform: skew(-20deg); 
 
    -webkit-transform: skew(-20deg); 
 
    -moz-transform: skew(-20deg); 
 
    text-align: center; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
} 
 

 
.info{ 
 
    float: left; 
 
    width:0%; 
 
    height: 40px; 
 
    background: #4B3E4D; 
 
    visibility: hidden; 
 
    font: 20px monospace; 
 
    background-color: gr; 
 
    transform: skew(-20deg); 
 
    -webkit-transform: skew(-20deg); 
 
    -moz-transform: skew(-20deg); 
 
    text-align: center; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    transition: width ease-out .3s, visibility ease-out .3s; 
 
    white-space: nowrap; 
 
    overflow:hidden; 
 
    padding: 10px 0; 
 
} 
 
.info.active{ 
 
    visibility: visible; 
 
    width:12%; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <section> 
 
    <div class="item"> about ►</div> 
 
    <div class="info">lab | research</div> 
 

 
    <div class="item"> people ►</div> 
 
    <div class="info">current | alumni</div> 
 
    
 
</section> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 

 
    <script src="js/index.js"></script> 
 

 
</body>

источник

2016-12-21 08:41:26

Вы должны проверить, если ваш выпадающий активен или нет. Поэтому добавьте class = "active", если он открыт. Этот класс не нужно иметь какой-либо стиль, это просто для нашего сценария, чтобы знать, что она открыта

Вот pen

и вот код:

$(function() { 
 

 
    
 
    // when to clicking on any item show the info about him and hide other info elemnet 
 
    $(".item").on("click", function() { 
 
    $(this).toggleClass("active"); 
 
    if($(this).hasClass('active')){ 
 
     $(this) 
 
     .next().show().animate({width: "12%"}); 
 
    } 
 
    else{ 
 
     $(".info").hide() 
 
     .animate({width: "0"}); 
 
    } 
 
    }); 
 
});

*{ 
 
    box-sizing: border-box; 
 
} 
 
body{ 
 
    background: white; 
 
    color: #D74F33; 
 
} 
 

 
section { 
 
    width: 1900px; 
 
    margin: 10px auto; 
 
    position: fixed; 
 
    left:-8px; 
 
} 
 
.item{ 
 
    width:9%; 
 
    height: 40px; 
 
    float: left; 
 
    border-right: 3px solid #D74F33; 
 
    font: 20px monospace; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    background-color: #333; 
 
    transform: skew(-20deg); 
 
    -webkit-transform: skew(-20deg); 
 
    -moz-transform: skew(-20deg); 
 
    text-align: center; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
} 
 

 
.info{ 
 
    float: left; 
 
    width:0%; 
 
    height: 40px; 
 
    background: #4B3E4D; 
 
    display: none; 
 
    font: 20px monospace; 
 
    padding: 10px; 
 
    background-color: gr; 
 
    transform: skew(-20deg); 
 
    -webkit-transform: skew(-20deg); 
 
    -moz-transform: skew(-20deg); 
 
    text-align: center; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Horizontal Accordion </title> 
 
    
 
    
 
    
 
     <link rel="stylesheet" href="css/style.css"> 
 

 
    
 
</head> 
 

 
<body> 
 
    <section> 
 
    <div class="item"> about ►</div> 
 
    <div class="info">lab | research</div> 
 

 
    <div class="item"> people ►</div> 
 
    <div class="info">current | alumni</div> 
 
    
 
</section> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 

 
    <script src="js/index.js"></script> 
 

 
</body> 
 
</html>

источник

2016-12-21 08:28:01 ab29007

You должны изменить поток вашей анимации.

При щелчке сначала закройте, если что-нибудь открыто, а затем откройте анимацию.

Отредактированный перьевого немного, чтобы достигнуть этого http://codepen.io/anon/pen/woOEgx

$(".item").on("click", function() { 
    $(".info") 
     .animate({width: "0"}).hide(); 
    $(this) 
     .next().show().animate({width: "12%"}); 
});

источник

2016-12-21 08:33:29 GeekAb

Как отключить мое выпадающее меню, когда я нажму на него второй раз?

ответ

Смежные вопросы