CSS与jQuery实现媒体查询下标签页折叠下拉切换效果

核心实现逻辑：在max-width: 500px断点下，固定显示第一个标签项，其余标签默认隐藏，新增「更多」触发按钮，点击后展开下拉菜单显示剩余标签，完全基于现有jQuery+纯CSS实现，无需引入第三方UI库。 #

1. 调整基础CSS样式 #

首先修改原有固定宽度的容器样式避免小屏横向溢出，再补充下拉交互相关样式、媒体查询规则：

body{
    margin-top: 100px;
    font-family: 'Trebuchet MS', serif;
    line-height: 1.6
}
.container{
    /* 替换原有固定800px宽度，实现自适应 */
    max-width: 800px;
    width: 95%;
    margin: 0 auto;
}

ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
    border-bottom: 2px solid #e44e4e;
    position: relative;
}
ul.tabs li{
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

ul.tabs li.current{
    background-color: #e44e4e;
    color: #fff;
}

ul.tabs li:last-child{
    float: right;
}

.tab-content{
    display: none;
    background: #fff;
    padding: 15px;
}

.tab-content.current{
    display: inherit;
}

/* 更多触发按钮，桌面端默认隐藏 */
.more-tabs {
    display: none;
}

/* 小屏断点样式 */
@media screen and (max-width: 500px) {
    ul.tabs li {
        /* 清除原有浮动，避免布局错乱 */
        float: none !important;
    }
    /* 固定显示第一个标签和更多按钮，横向排列 */
    ul.tabs li:first-child,
    .more-tabs {
        display: inline-block !important;
    }
    /* 其余标签默认隐藏 */
    ul.tabs li:not(:first-child):not(.more-tabs) {
        display: none;
    }
    /* 展开状态下，剩余标签按下拉样式排列 */
    ul.tabs.open li:not(:first-child):not(.more-tabs) {
        display: block;
        background: #f5f5f5;
        border-bottom: 1px solid #eee;
    }
    /* 更多按钮激活样式 */
    .more-tabs.current {
        background: transparent;
        color: #222;
    }
    ul.tabs.open .more-tabs {
        background: #e44e4e;
        color: #fff;
    }
}

2. 扩展jQuery交互逻辑 #

保留原有标签切换功能，新增下拉展开/收起、点击外部自动收起的逻辑：

$(document).ready(function(){
    // 原有标签切换逻辑
    $('ul.tabs li').click(function(e){
        // 点击带跳转链接的项不触发标签切换
        if($(this).find('a').length) return;
        
        var tab_id = $(this).attr('data-tab');
        // 点击折叠菜单内的标签时，先收起下拉
        if(!$(this).is(':first-child') && $(window).width() <= 500) {
            $('ul.tabs').removeClass('open');
        }

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        if(tab_id) {
            $("#"+tab_id).addClass('current');
        }
    })

    // 更多按钮点击切换下拉状态
    $('.more-tabs').click(function(e){
        e.stopPropagation();
        $('ul.tabs').toggleClass('open');
    })

    // 点击页面其他区域自动收起下拉
    $(document).click(function(){
        $('ul.tabs').removeClass('open');
    })
})

3. 调整HTML结构 #

在第一个标签项后插入「更多」触发按钮，其余结构保持不变：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <!-- 新增移动端更多触发按钮 -->
        <li class="tab-link more-tabs">更多 ▾</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
        <li class="tab-link" data-tab="tab-3">Tab Three</li>
        <li class="tab-link" data-tab="tab-4">Tab Four</li>
        <li class="tab-link"><a href="test">View All</a></li>
    </ul>

    <div id="tab-1" class="tab-content current">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div id="tab-2" class="tab-content">
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="tab-3" class="tab-content">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-4" class="tab-content">
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>

</div><!-- container -->

效果说明 #

• 屏幕宽度大于500px时，保持原有横向标签布局和交互不变
• 屏幕宽度小于等于500px时，仅固定显示第一个标签，其余标签收入下拉菜单，点击「更多」可展开/收起
• 点击下拉内标签切换内容后菜单自动收起，点击页面空白区域也会自动收起菜单
• 原有带跳转链接的「View All」项不受标签切换逻辑影响，可正常跳转

内容的提问来源于stack exchange，提问作者DLK