두 번째로 클릭하면 내 드롭 다운 메뉴가 토글되지 않게하려면 어떻게합니까?

저는 JavaScript에 익숙하지 않고 가로형 아코디언을 만들 때 발견 한 코드를 조합했습니다. 그러나 닫을 수 없었습니다. 기본적으로 토글하는 법을 모르겠습니다. 당신은 당신의 드롭 다운이 활성화인지 아닌지 확인해야두 번째로 클릭하면 내 드롭 다운 메뉴가 토글되지 않게하려면 어떻게합니까?

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

출처

2016-12-21 SideSlaw

가능한 중복을 http://stackoverflow.com/questions/17388122/drop-down-menu-with-on ([클릭 토글로 메뉴를 드롭 다운] -click-toggle) – wscourge

'slideToggle '을 사용해 보셨습니까? –

을 달성하고 클래스 .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

$(function() { 

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

});

여기 내 codepen입니다. 따라서 class = "active"가 열려 있으면 추가하십시오.

$(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

당신에게이 클래스는 우리의 스크립트는

여기 pen

의 열려 있음을 아는 그냥 여기에 코드입니다, 어떤 스타일이 필요하지 않습니다 애니메이션의 흐름을 변경해야합니다.

아무튼 열리면 클릭하고 애니메이션으로여십시오.

그것은 제거하고 클래스마다 클릭을 추가, 내가 대신 animate tansition 사용이 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

두 번째로 클릭하면 내 드롭 다운 메뉴가 토글되지 않게하려면 어떻게합니까?

답변

관련 문제