如何在加载事件中隐藏 header 中的子菜单并在悬停事件中显示

Question

我试图隐藏我的 div class="admi-mm-{{$cat_no}}"

加载并在悬停事件中显示它，我为这个主要类别创建动态 divs，当你悬停一个你看到 div 和子菜单

@foreach($categories as $main_cat)
                            <?php $cat_no += 1 ?>
                            <li class="admi-menu-{{$cat_no}}">
                                <a href="#" class="mm-arr">{{$main_cat->title}}</a>
                                <!-- MEGA MENU 1 -->
                                <div class="mm-pos">
                                    <style>
                                    .admi-mm-{{$cat_no}} {
                                        display:none;
                                    }
                                    </style>
                                    <div class="admi-mm-{{$cat_no}} m-menu">
                                        <div class="m-menu-inn">
                                            @php ($sub_cat = DB::table('category')->where('parent_id','=',$main_cat->id)->orderby('id','asc')->get())
                                            @foreach($sub_cat as $sub_level)
                                            <div class="mm2-com mm1-com mm1-s1">
                                                <div class="ed-course-in">
                                                    <a class="course-overlay" href="{{ url('/allpackage') }}/{{$sub_level->id}}">
                                                        <img src="{{ Request::root() }}/website/images/sight/{{$sub_level->image}}" alt="">
                                                        <span>{{$sub_level->title}}</span>
                                                    </a>
                                                </div>
                                                <a href="{{ url('/allpackage') }}/{{$sub_level->id}}" class="mm-r-m-btn">عرض التفاصيل</a>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </li>
                            @endforeachhere

Answer 1

这是我的 jquery 代码

var x = 1;
for (x = 1; x < 6; x++) {
    //MEGA MENU 
    $(".admi-menu"+x+"").hover(function() {
        $(".admi-mm-"+x+"").fadeIn();
    });
    $(".admi-menu"+x+"").mouseleave(function() {
        $(".admi-mm-"+x+"").fadeOut();
    }); 
}