jQuery로 div를 전환하는 문제

Question

빨간색 사이드 바를 클릭했을 때 표시되는 숨겨진 영역이 있습니다. 빨간색 사이드 바를 다시 클릭하면 숨기고 싶습니다.

나는 클릭 할 때 접을 수있는 영역을 숨기는 숨겨진 영역 안에 파란색 막대를 넣었습니다. 빨간색 막대가 두 가지 작업을 수행하고 접을 수있는 영역을 숨기고 표시하고 싶습니다.

HTML :

<div class="frame"> 
    <div id="menu" class="menu nav-collapse collapse width aux"> 
     <div class="collapse-inner"> 
      <div id="left-collapser"></div> 
     </div> 
    </div> 
    <div class="view aux2"> 
     <div id="right-collapser" data-toggle="collapse" data-target="#menu"></div> 
    </div> 
</div> 

CSS

#left-collapser { 
    width: 20px; 
    height: 100%; 
    float: right; 
    background-color: lightblue; 
} 
#right-collapser { 
    width: 20px; 
    height: 100%; 
    float: left; 
    background-color: red; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px; 

} 

.aux { 
    border: 1px solid red; 
    background-color: yellow; 
} 
.aux2 { 
    border: 1px solid blue; 
    background-color: lightgreen; 
} 
body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 

    .frame { 
    position: absolute; 
    width: 200%; 
    height: 100%; 
    top: 0; 
    bottom: 0; 
    left: 0; 

    .menu { 
     height:100%; 
     /* background-color: #3D6AA2; */ 

     &.collapse { 
     float:left; 
     height: 100% !important; 
     width: auto; 
     } 

     &.collapse.height { 
     position: relative; 
     height: 0; 
     overflow: hidden; 
     -webkit-transition: height 0.35s ease; 
     -moz-transition: height 0.35s ease; 
     -o-transition: height 0.35s ease; 
     transition: height 0.35s ease; 
     } 

     &.collapse.width { 
     position: relative; 
     width: 0; 
     overflow: hidden; 
     -webkit-transition: width 0.35s ease; 
     -moz-transition: width 0.35s ease; 
     -o-transition: width 0.35s ease; 
     transition: width 0.35s ease; 
     } 

     &.collapse.in.width { 
     width: auto; 
     } 

     &.collapse.in.height { 
     height: auto; 
     } 

     .collapse-inner { 
     position: relative;   
     width: 250px; 
     height: 100%; 
     } 

    } 
    .view { 
     width: 50%; 
     height: 100%; 
     overflow: hidden; 

    } 
    } 
} 

자바 스크립트

$("#left-collapser").click(function (e) { 
    $('#menu').collapse('hide'); 
}); 

$("#right-collapser").click(function (e) { 
    $('#menu').collapse('show'); 
}); 

H 감수는 Fiddle

입니다 ••••••••••••••••••••••••••••••••••••••••• ?,? ?,,,,,,,,,,,,,,,, ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• •••••••••••••••••••••••••••••••••••••••••••••• ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• ••••••••••••••••••

그것은 애니메이션이 CSS를 통해 행진으로 자바 스크립트가 전혀 필요하지 않습니다 밝혀 :

FIDDLE

I Javascript가 붕괴/확장 효과는 있지만 CSS는 적용되지 않는 것으로 생각했습니다. 내가 의도 한 바를 얻었지만 그물에서 발견 된 코드를 재사용 한 이래로 나는 여전히이 효과가 얼마나 정확하게 달성되었는지 알고 싶다. 그래서 이미 수행 된 것을 찾는 대신 스스로 할 수있다.

Answer 1

이미 축소 이벤트/기능은 data attributedata-toggle="collapse" 및 data-target을 통해 사용하도록 설정했습니다. 그 s all you needed when you have bootstrap.js` 포함되어 있습니다.

또한 수동으로이 같은 javascript를 통해 그것을 트리거 할 수 있습니다

이

$('#menu').collapse('toggle') 

당신이 here에 대한 자세한 내용을보실 수 있습니다.

Answer 2

이 시도 : 당신은 파란색 영역을 필요로하지 않을 수 있습니다

$("#left-collapser").click(function (e) { 
    $('#menu').toggle('collapse'); 
}); 

FIDDLE

.

Answer 3

고객님의 Fiddle을 업데이트했습니다.

나는 이제 당신은 빨간색 영역을 클릭하여/숨기기를 표시 할 수 있습니다

$("#left-collapser").click(function (e) { 
    $('#menu').collapse('hide'); 
}); 

$("#left-collapser").click(function (e) { 
    $('#menu').collapse('show'); 
}); 

에 JS를 변경했습니다.

다른 답변에서 언급했듯이 파란색 영역을 제거 할 수 있습니다.

Answer 4

노력이 fiddle

$("#left-collapser").click(function (e) { 
    $('#menu').toggle('collapse'); 
});