外贸易 产品一二级，只做二级切换右侧，右侧默认推荐几个产品

<div class="section2 overflow">
    <div class="max1530 clearfix">
        <div class="section2-top flex2 j-space-between wrap wow fadeInUp" {{ inject('visual')->url('block', 'hm-bt2') }}>
            <div class="hm-title hm-title2 text-left">
                <h3>{!! inject('block')->block('hm-bt2', 'title') !!}</h3>
                <p>{!! inject('block')->block('hm-bt2', 'extend') !!}</p>
            </div>
            <div class="hm-more mt-30">
              <a href="/product/"><span>{!! inject('block')->block('view-more', 'title') !!}</span><i></i></a>
            </div>
        </div>

        <div class="section2-product flex2 a-flex-start j-sapce-between wrap">
            <div class="sec2-left wow fadeInLeft">
                <div class="cate-titu">
                    <h3>{{ inject('setting')->langs('web', 'product') }}</h3>
                </div>
                <div class="cate-sort" {{ inject('visual')->url('product-cate') }} >
                    @foreach (inject('category')->cate() as $value)
                    <div class="category-block">
                        <div class="deep-a">
                            <a href="javascript:;" class="cat-title" data-cid="{{ $value->id }}">
                                {{ $value->description->cname }}
                            </a>
                            <span class="jiao-click"></span>
                        </div>

                        @if(!$value->children->isEmpty())
                        <ul class="deep2-sort tab-li">
                            @foreach ($value->children as $val)
                            <li data-subid="{{ $val->id }}">
                                <a href="javascript:;">{{ $val->cname }}</a>
                            </li>
                            @endforeach
                        </ul>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
   
            <div class="sec2-right wow fadeInRight">
                <div class="tab-con">
                    <!-- ⭐ 默认推荐内容，不参与切换 -->
                    <div class="deep2 tab-main active" data-cid="0">
                        <ul class="listx flex2 wrap">
                            @foreach (inject('list')->lists('product', 0, 9, 0, 'recom-1') as $val2)
                            <li>
                                <a href="{{ $val2->present()->url }}" title="{{ $val2->description->title }}" class="img">
                                    <div class="img com-img">
                                        <img src="{{ $val2->description->present()->image('355*320') }}" alt="{{ $val2->description->title }}">
                                    </div>
                                    <h3>{{ $val2->description->title }}</h3>
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>

                    <!-- ⭐ 所有子分类对应内容 -->
                    @foreach (inject('category')->cate() as $value)
                        @if(!$value->children->isEmpty())
                            @foreach ($value->children as $val)
                            <div class="deep2 tab-main" data-cid="{{ $value->id }}" data-subid="{{ $val->id }}">
                                <ul class="listx flex2 wrap">
                                    @foreach (inject('list')->lists('product', $val->id, 9, 0) as $val2)
                                    <li>
                                        <a href="{{ $val2->present()->url }}" title="{{ $val2->description->title }}" class="img">
                                            <div class="img com-img">
                                                <img src="{{ $val2->description->present()->image('355*320') }}" alt="{{ $val2->description->title }}">
                                            </div>
                                            <h3>{{ $val2->description->title }}</h3>
                                        </a>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endforeach
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
       
    </div>
</div>



<script>
    $(function () {

        var $defaultTab = $('.tab-main[data-cid="0"]'); // 默认推荐内容
        var $allTabs = $('.tab-main');                 // 所有内容块

        // ---------- 默认只显示推荐 ----------
        $allTabs.removeClass("active");
        $defaultTab.addClass("active");

        // ---------- 遍历所有一级分类 ----------
        $(".category-block").each(function () {

            var $group = $(this);
            var cid = $group.find(".cat-title").data("cid");  // 一级分类 ID
            var $lis = $group.find(".tab-li li");

            // ⭐ 如果一级分类没有二级 → 跳过
            if ($lis.length === 0) return true;

            // ---------- 二级 hover 切换 ----------
            $lis.hover(function () {

                var subid = $(this).data("subid"); // 当前二级ID

                // 左侧样式
                $(this).addClass("active").siblings().removeClass("active");

                // 右侧：隐藏所有，显示匹配的
                $allTabs.removeClass("active");

                // 显示当前二级对应的内容块
                $('.tab-main[data-cid="' + cid + '"][data-subid="' + subid + '"]').addClass("active");
            });

            // ---------- 鼠标离开一级 → 恢复默认推荐 ----------
            $group.mouseleave(function () {
                $lis.removeClass("active");
                $allTabs.removeClass("active");
                $defaultTab.addClass("active");
            });

        });

    });


    $(function () {
        // ============ 展开 / 收起二级分类 ============
        $(".category-block .jiao-click").click(function (e) {
            e.stopPropagation(); // 防止冒泡影响 hover 事件

            var $icon = $(this);
            var $block = $icon.closest(".category-block");
            var $subMenu = $block.find(".deep2-sort");

            // 切换显示 / 隐藏
            $subMenu.slideToggle(200);

            // 切换箭头方向
            $icon.toggleClass("open");

            // 同时关闭其他分类（如需要）
            $(".category-block").not($block).each(function () {
                $(this).find(".deep2-sort").slideUp(200);
                $(this).find(".jiao-click").removeClass("open");
            });
        });

    });

</script>


<style>
.section2{position:relative;background:url(//wm.cdn.cn86.cn/ahruikaigj/2025/11/51c45c324bh7ndw8.jpg) no-repeat;background-size:cover;padding-top:5.2083vw;padding-bottom:4.166vw}
.hm-title2 h3{margin-bottom:30px}
.hm-title2 p{color:#444;line-height:1.2}
.hm-more{position:relative}
.hm-more a{display:flex;align-items:center;justify-content:space-between;background-color:#d97d35;line-height:38px;padding:15px 25px 15px 20px}
.hm-more a span{color:#fff;font-size:1.35416vw}
.hm-more a i{width:36px;height:36px;background:url(//wm.cdn.cn86.cn/ahruikaigj/2025/11/6c8fc1142aapktyw.png) no-repeat center;margin-left:2.083vw;display:block}
.tab-con{position:relative}
.tab-con .tab-main{position:absolute;left:0;top:0;right:0;opacity:0;visibility:hidden;transition:all .5s ease;z-index:9}
.tab-con .tab-main.active{position:static;opacity:1;visibility:visible}
.section2-product{margin-top:3.64583vw}
.sec2-left{position:relative;width:300px;margin-right:7.2916vw;background-color:#fbfbfb}
.cate-titu{position:relative;background-color:#184085;padding:20px 14px 28px}
.cate-titu h3{font-size:1.875vw;color:#fff;font-weight:400;position:relative;line-height:1.1;padding-bottom:1.5625vw}
.cate-titu h3::before{position:absolute;left:0;bottom:0;width:4.166vw;height:3px;background:#fff;content:""}
.cate-sort .category-block{position:relative;margin-bottom:4px}
.category-block .deep-a{position:relative;border:1px solid #dedede;background-color:#fafafa;padding:12px 15px;margin-bottom:4px}
.category-block .deep-a a.cat-title{display:block;font-size:18px;color:#60666d}
.category-block .deep-a .jiao-click{position:absolute;right:0;top:0;display:block;width:50px;height:100%;background:url(//wm.cdn.cn86.cn/ahruikaigj/2025/11/645abf411bmm1xad.png) no-repeat center;z-index:99;cursor:pointer;transition:.3s}
.jiao-click.open{transform:rotate(180deg)}
.deep2-sort{display:none}
.deep2-sort li{margin-bottom:4px}
.deep2-sort li a{display:block;border:1px solid #dedede;background-color:#fafafa;padding:12px 15px 12px 25px;color:#60666d;font-size:15px}
.sec2-right{position:relative;flex:1;min-width:1px}
.listx{position:relative}
.listx li{position:relative;width:calc(33.33% - 10px);margin:0 5px 15px 5px;text-align:center;border:1px solid #c3c5c5;background-color:#fff;transition:all .5s ease}
.listx li a{display:block}
.listx li .img img{display:block;width:100%}
.listx li h3{padding:17.5px 0;background-color:#f7f8f8;line-height:2.083vw;font-size:1.4583vw;color:#191919;font-weight:400;margin-bottom:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}

<style>