这是我的问题，我使用jQuery“委托”在点击功能上添加事件。 当用户点击div时，宽度增加，但我想反转动作，即当用户再次点击相同的div时宽度应该会崩溃。
实现相同目标的任何其他解决方案都会有所帮助。 提前致谢
这是我的代码：
$(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>
答案 0 :(得分：1)
$(document).ready(function(){
var activePanel;
$(activePanel).toggleClass('active');
$("#accordion").delegate('.panel', 'click', function(e){
if( ! $(this).is('.active') ){
$(activePanel).animate({width: "43px"}, 300);
$(this).animate({width: "265px"}, 300);
$('#accordion').removeClass('active');
$(this).toggleClass('active');
activePanel = this;
} else {
$(activePanel).animate({width: "43px"}, 300);
$(this).animate({width: "65px"}, 300);
$('#accordion').removeClass('active');
$(this).toggleClass('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;}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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>