jQuery幻灯片切换和屏幕大小

Question

嘿，我正在尝试使标头响应，但我遇到了一个问题 这就是我的元素

        <div class="w-75">
           <ul class="main-menu">
               <li class="active"><a href="/home">{{ __('general.Anohe') }}</a></li>
               <li><a href="#">{{ __('general.sell-place') }}</a></li>
               <li><a href="/page/about">{{ __('general.about-us') }}</a></li>
               <li><a href="/page/contact-us">{{ __('general.contact-with-us') }}</a></li>
               <li>
                    <ul class="nav navbar-nav">
                        <li class="dropdown dropdown-large">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">محصولات <b class="caret"></b></a>
                            <ul class="dropdown-menu dropdown-menu-large row">
                                <li class="col-sm-6 float-right">
                                    <ul dir="rtl">
                                        <li class="dropdown-header">محصولات</li>
                                        <li class="w-100"><a href="/home/electronic">الکترونیک</a></li>
                                        <li class="w-100"><a href="/home/book">کتاب</a></li>
                                        <li class="w-100"><a href="/home/cloth">بازی و سرگرمی</a></li>
                                        <li class="w-100"><a href="/home/game">پوشاک</a></li>
                                    </ul>
                                </li>
                            </ul>

                        </li>
                    </ul>
               </li>
               <li>
                    <form action="/search">
                      <input style="height: 40px;width: 200px" type="text" placeholder="Search.." name="search">
                      <button style="background-color: #e22b63; color: #ffffff; border: none; height: 40px" type="submit">Submit</button>
                    </form>
                </li>
           </ul>
        </div>

当我的屏幕分辨率小于550 px时，菜单变成一个按钮，并且

    $('#toggle-sliding').click(function(){
        $('.main-menu').slideToggle('slow');
    });

我可以隐藏和取消隐藏它。 问题是当我隐藏它并将屏幕大小调整到550px以上时，该按钮将消失，并且菜单仍处于隐藏状态，我必须刷新页面才能再次取消隐藏它。 那么我该怎么做才能使其再次隐藏起来？