1
여기 내 문제입니다. jQuery를 "델리게이트"를 사용하여 클릭 기능에 이벤트를 추가했습니다. 사용자가 div를 클릭하면 너비가 증가하지만 사용자가 동일한 div를 다시 클릭 할 때 너비가 축소되어야한다는 동작을 되돌리려합니다.jQuery에서 폭 애니메이션 동작을 되돌릴 수 없습니다.
같은 것을 얻기위한 다른 해결책이 도움이 될 것입니다. 이 작업을 수행하는 다른 간단한 방법
$(document).ready(function() {
var activePanel;
$(activePanel).addClass('active');
$("#accordion").delegate('.panel', 'click', function(e) {
if (!$(this).is('.active')) {
$(activePanel).animate({
width: "43px"
}, 300);
$(this).animate({
width: "265px"
}, 300);
$('#accordion .panel').removeClass('active');
$(this).addClass('active');
activePanel = this;
};
});
});#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 50px;
width: 355px;
margin: 0 0 0 11px;
overflow: hidden;
}
#accordion .panel {
float: left;
display: block;
height: 50px;
width: 43px;
overflow: hidden;
color: #666666;
text-decoration: none;
font-size: 16px;
line-height: 1.5em
}
#accordion .panel.active {
width: 265px;
}
.panelContent {
padding: 10px 0 0 10px;
width: 79%;
float: left;
}
.panelContent input {
float: left;
width: 86%;
padding: 8px;
border: 1px solid #ccc;
}
.pink {
width: 43px;
height: 50px;
float: left;
cursor: pointer;
}
.last {
border: none;
}
.fa-search {
padding: 5px;
font-size: 37px;
}
.fa-map-marker {
font-size: 42px;
padding: 4px 5px 5px 8px;
}
.fa-share-alt {
padding: 5px;
font-size: 38px;
}
.fa-search:hover,
.fa-map-marker:hover,
.fa-share-alt:hover {
color: #000;
}
.fa-facebook {
padding: 13px 16px;
border-radius: 30px;
color: #fff;
background: #3b5998;
}
.fa-twitter {
padding: 13px;
border-radius: 30px;
color: #fff;
background: #4099FF;
}
.fa-linkedin {
padding: 13px 14px;
border-radius: 30px;
color: #fff;
background: #4875B4;
}
.fa-google-plus {
padding: 13px 11px;
border-radius: 30px;
color: #fff;
background: #C63D2D;
}
.fa-facebook:hover {
background: #284978;
}
.fa-twitter:hover {
background: #388ae9;
}
.fa-linkedin:hover {
background: #006BA1;
}
.fa-google-plus:hover {
background: #ac392a;
}
.p3 {
padding: 5px 0 0 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="accordion">
<div class="panel">
<div class="pink"><i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="panelContent p1">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="panel">
<div class="pink dark1"><i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
<div class="panelContent p2">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="panel">
<div class="pink dark2"><i class="fa fa-share-alt" aria-hidden="true"></i>
</div>
<div class="panelContent p3">
<a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
</div>
</div>
</div>
가 : 여기
사전
에서 덕분에 내 코드? – Nag예! 솔직히이 솔루션은 조금 복잡합니다! 잠시만 기다려주세요 ... –
예 제발 ..... jquery로 숨기고 표시하려고했지만 더 복잡해졌습니다. – Nag