slideToggle отскакивает вверх и вниз

Я пытаюсь создать область с вкладками с вертикальными вкладками, но когда экран будет меньше 640 пикселей, вкладки меняются в стиле аккордеона, показывают/скрывают, где одновременно могут открываться несколько разделов.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

Когда-либо окно было изменено, оно прикрепляет к элементам новое событие click (вместо замены старых событий щелчка).

заменить

click({

.unbind('click').click({

это удалит старые кнопки мыши события и назначить новые.

источник

2015-01-02 12:38:10

Perfect - спасибо Cerlin Boss! –

slideToggle отскакивает вверх и вниз

ответ

Смежные вопросы