slideToggle上下反彈

我試圖創建一個帶有垂直製表符的標籤區域，但是當屏幕製作得小於640px時，製表符會切換到手風琴風格的顯示/隱藏，一次可以打開多個部分。slideToggle上下反彈

這裏是的jsfiddle： http://jsfiddle.net/no4dvn3s/

當頁面加載選項卡的左側和右側的內容。如果您使屏幕變小，則選項卡變爲全寬，並且相關內容位於每個選項卡下。當你點擊標題標題時，內容應該滑落，但它現在會反覆上下幾次 - 任何想法是什麼造成的？

此外，如果使用標籤全寬度以相同的屏幕大小刷新頁面，則不會發生反彈動作！

這是我的代碼 - 任何幫助非常感謝！

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
<style> 
@media only screen and (min-width:621px) { 
#product #tabbed_area {height:auto; width:100%; overflow:hidden; margin-top:15px;} 
#product #tabbed_area .tab_holder {height:auto; width:100%; overflow:hidden; margin-bottom:5px;} 
#product #tabbed_area h3 {height:auto; width:30%; background:#d4d4d4 url(/Content/images/mobile_new/product/tab_off_state.png) 0 bottom repeat-x; border:1px solid #ebebeb; margin:0 0 5px 0; box-sizing:border-box; padding:0; font-family:'geometric_medium', arial; text-transform:uppercase; text-indent:10px; color:#000000; display:block; text-decoration:none; font-size:1.3em; padding:12px 0; position:relative;} 
#product #tabbed_area h3:hover {cursor:pointer;} 
#product #tabbed_area h3.active_tab {background:#580e3b url(/Content/images/mobile_new/product/tab_on_state.png) 0 bottom repeat-x; color:#ffffff;} 
#product #tabbed_area h3 i {float:right; padding:12px 0 12px 0; position:absolute; right:15px; top:0;} 
#product #tabbed_area .tab_content {display:none; margin:10px;} 
#yourContainer {float:right; width:40%;} 
} 

@media only screen and (max-width:620px) { 
#product #tabbed_area {height:auto; width:100%; overflow:hidden; margin-top:15px;} 
#product #tabbed_area .tab_holder {height:auto; width:100%; overflow:hidden; margin-bottom:5px;} 
#product #tabbed_area h3 {height:auto; width:100%; background:#d4d4d4 url(/Content/images/mobile_new/product/tab_off_state.png) 0 bottom repeat-x; border:1px solid #ebebeb; margin:0 0 5px 0; box-sizing:border-box; padding:0; font-family:'geometric_medium', arial; text-transform:uppercase; text-indent:10px; color:#000000; display:block; text-decoration:none; font-size:1.3em; padding:12px 0; position:relative;} 
#product #tabbed_area h3:hover {cursor:pointer;} 
#product #tabbed_area h3.active_tab {background:#580e3b url(/Content/images/mobile_new/product/tab_on_state.png) 0 bottom repeat-x; color:#ffffff;} 
#product #tabbed_area h3 i {float:right; padding:12px 0 12px 0; position:absolute; right:15px; top:0;} 
#product #tabbed_area .tab_content {display:none; margin:10px;} 

} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://swimmingcover.co.uk/mobile.js"></script> 

<div id="product"> 
    <div id="tabbed_area"> 
     <div class="tab_holder" id="tab1"> 
      <h3 class="tab_ttl active_tab">Tab1 <i class="fa fa-chevron-up"></i></h3> 
     </div> 

     <div class="tab_holder" id="tab2"> 
      <h3 class="tab_ttl">Tab2 <i class="fa fa-chevron-down"></i></h3> 
     </div> 

     <div class="tab_holder" id="tab3"> 
      <h3 class="tab_ttl">Tab3 <i class="fa fa-chevron-down"></i></h3> 
     </div> 

     <div id="yourContainer"> 
      <div class="tab_content content1" id="about" style="display: block;"> 
       Tab1 Content 
      </div> 

      <div id="important" class="tab_content content2" style="display: none;"> 
       Tab2 Content 
      </div> 

      <div class="tab_content content3" id="location_list" style="display: none;"> 
       Tab3 Content 
      </div> 

     </div> 
    </div> 
</div>

來源

2015-01-02 Catherine Allen

我認爲它在小提琴中正常工作..或者我不明白 –

是[** this **]（http://jsfiddle.net/Cerlin/no4dvn3s/1/）你想要什麼？ –

您需要調整小提琴的大小，直到標籤爲全寬，點擊其中一個標籤名稱和內容上下彈起 –

我想我找到了錯誤。檢查這個fiddle

當窗口重新調整大小時，它將新的單擊事件附加到元素（而不是替換舊的單擊事件）。

與

.unbind('click').click({

這種替代

click({

將刪除舊的單擊事件，並指定新的。

來源

2015-01-02 12:38:10

完美 - 謝謝Cerlin Boss！ –

slideToggle上下反彈

回答

相關問題