slideToggle 上下弹跳

Question

我正在尝试创建一个带有垂直选项卡的选项卡区域，但是当屏幕小于 640 像素时，选项卡会变成手风琴风格的显示/隐藏，可以同时打开多个部分。

这里是 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>

Answer 1

我想我发现了错误。检查这个fiddle

当窗口被调整大小时，它会为元素附加一个新的点击事件（而不是替换旧的点击事件）。

替换

click({

与

.unbind('click').click({

这将删除旧的点击事件并分配新的。