無法在jQuery中反轉寬度動畫動作

Question

這是我的問題，我用jQuery「委託」在click函數上添加事件。 當用戶點擊一個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>

Answer 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 { 
 
      \t $(activePanel).animate({width: "43px"}, 300); 
 
      \t $(this).animate({width: "65px"}, 300); 
 
      \t $('#accordion').removeClass('active'); 
 
      \t $(this).toggleClass('active'); 
 
      \t 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>