Question

我正在尝试使用垂直标签创建标签区域但是当屏幕小于640px时，标签会变为手风琴风格的显示/隐藏，其中可以同时打开多个部分。

这是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({

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

slideToggle上下弹跳

1 个答案: