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