Jquery 如何在移动端口（小型设备）删除div类

我有两门课：

<nav class="side-navbar shrinked">
<div class="content-inner active">

但是当涉及到移动设备和页面加载时，我想从我的类中删除收缩的和活动的，它应该显示如下：

 <nav class="side-navbar">
 <div class="content-inner">

这是我的脚本，我还尝试添加一些代码来删除这些类，但不起作用：

// Sidebar Functionality
// ------------------------------------------------------ //
$('#toggle-btn').on('click', function (e) {
    e.preventDefault();
    $(this).toggleClass('active');

    $('.side-navbar').toggleClass('shrinked');
    $('.content-inner').toggleClass('active');
    $(document).trigger('sidebarChanged');

    if ($(window).outerWidth() > 1183) {
        if ($('#toggle-btn').hasClass('active')) {
            $('.navbar-header .brand-small').hide();
            $('.navbar-header .brand-big').show();
        } else {
            $('.navbar-header .brand-small').show();
            $('.navbar-header .brand-big').hide();
        }
    }

    if ($(window).outerWidth() < 1183) {
        $('.navbar-header .brand-small').show();

    }


});
// ------------------------------------------------------- //
// Remove classes (but its not working)
// ------------------------------------------------------ //
$(window).load(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 600) {
        $(".side-navbar shrinked").removeClass("shrinked");
        $(".content-inner active").removeClass("active");
    }
});

//侧栏功能
// ------------------------------------------------------ //
$（“#切换btn”）。打开（'单击'，函数（e）{
e、 预防默认值（）；
$（this.toggleClass（'active'）；
$（'.side-navbar'）.toggleClass（'shrinked'）；
$（'.content-inner'）.toggleClass（'active'）；
$（document.trigger（'sidebarChanged'）；
if（$（窗口）.outerWidth（）>1183）{
if（$（'#toggle btn'）.hasClass（'active'））{
$（'.navbar header.brand small'）.hide（）；
$（'.navbar header.brand big'）.show（）；
}否则{
$（'.navbar header.brand small'）.show（）；
$（'.navbar header.brand big'）.hide（）；
}
}
if（$（窗口）.outerWidth（）<1183）{
$（'.navbar header.brand small'）.show（）；
}
});
// ------------------------------------------------------- //
//删除类（但它不起作用）
// ------------------------------------------------------ //
$（窗口）。加载（函数（）{
var viewportWidth=$（窗口）.width（）；
如果（视口宽度<600）{
$（“.side导航条收缩”）.removeClass（“收缩”）；
$（“.content内部活动”）.removeClass（“活动”）；
}
});

我在评论中准备好了，我们可以通过CSS媒体查询解决这个问题，还有我的HTML：

<div class="page-content d-flex align-items-stretch">
    <!-- Side Navbar -->
    <nav class="side-navbar shrinked">
        <!-- Sidebar Header-->
        <div class="sidebar-header d-flex align-items-center">
            <div class="avatar"><img src="~/assist_Admin/img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div>
            <div class="title">
                <h1 class="h4">@Session["Email"]</h1>
                <p>Administrator</p>
            </div>
        </div>
        <!-- Sidebar Navidation Menus--><span class="heading">Værktøjer</span>
        <ul class="list-unstyled">
            <li class="active"><a href="/User/Forside"> <i class="icon-home"></i>Hjem </a></li>
            <li> <a href="/User/AllEmails"> <i class="icon-mail"></i>Email List </a></li>
            <li>
                <a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i>Tilføj </a>
                <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
                    <li><a href="/User/AddUser">Tilføj brugere</a></li>
                    <li><a href="/User/AddEmployee">Tilføj medarbajder</a></li>

                </ul>
            </li>

        </ul><span class="heading">Ekstra</span>
        <ul class="list-unstyled">
            <li> <a href="#"> <i class="icon-flask"></i>Facebook </a></li>
            <li> <a href="#"> <i class="icon-screen"></i>Linkedin </a></li>
            <li> <a href="#"> <i class="icon-mail"></i>Web Shop </a></li>

        </ul>
    </nav>

    <div class="content-inner active">

        <!-- Page Footer-->
        <footer class="main-footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        <p>Ed Admin &copy; 2017-2019</p>
                    </div>
                    <div class="col-sm-6 text-right">
                        <p>Design by <a href="" class="external"></a></p>

                    </div>
                </div>
            </div>
        </footer>
        @RenderBody()
    </div>
</div>

@会话[“电子邮件”]
管理员

沃克托耶









Ekstra





教育署行政及复印部；2017-2019

设计人

@RenderBody（）

将脚本更改为

$(document).ready(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 600) {
        $(".side-navbar.shrinked").removeClass("shrinked");
        $(".content-inner.active").removeClass("active");
    }
});

请参考MDN了解如何使用它

编辑：

我已将

$（窗口）.load（）

更改为

$（文档）.ready（）

。查看此问题以了解更多详细信息

---

将脚本更改为

$(document).ready(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 600) {
        $(".side-navbar.shrinked").removeClass("shrinked");
        $(".content-inner.active").removeClass("active");
    }
});

请参考MDN了解如何使用它

编辑：

我已将

$（窗口）.load（）

更改为

$（文档）.ready（）

。查看此问题以了解更多详细信息

---

为什么不使用媒体查询？@Prajwal会给我一个例子：）CSS媒体查询是目前为止实现您所需的最好方法。不过，我们需要查看您的HTML以向您展示如何准确操作。@media screen和（最大宽度1183px）{.navbar header.brand smal{display:none；}}上面的示例将隐藏.navbar header.brand smal如果屏幕大小低于值，您也不必处理onload事件和调整事件，以及屏幕旋转。您没有正确选择班级

.side-navbar-shrinked

sholud-be

。side-navbar.shrinked

和same

。content-inner-active

应该是

。content-inner.active

为什么不使用媒体查询？@Prajwal会给我一个例子：）CSS媒体查询是目前为止实现您所需的最佳方式。不过，我们需要查看您的HTML以向您展示如何准确操作。@media screen和（最大宽度1183px）{.navbar header.brand smal{display:none；}}上面的示例将隐藏.navbar header.brand smal如果屏幕大小低于值，您也不必处理onload事件和调整事件，以及屏幕旋转。您没有正确选择班级

.side navbar收缩

应为

。side navbar.shrinked

和相同的

。内容内部处于活动状态

应为

。内容内部处于活动状态

last@HellorhighWater你能检查一下这个方法是否被触发了吗？当我将$（window）.load（）更改为$（document）.ready（）时，它就工作了，但有一点很小的事情，当我加载页面只需几秒钟，它会显示侧栏，而不是没有，是不是有什么东西可以修复这个可能！我只是发现当我手动重新加载页面时，它会工作，否则not@HellorhighWater是的，

$（document）.ready

只运行一次。当你加载页面时。我只是添加完整的HTML，你能给我一个媒体查询的例子吗：）@HellorhighWater你能检查一下这个方法是否被解雇了吗？当我将$（window）.load（）更改为$（document.ready（），它就可以工作了，但是当我加载页面几秒钟时，有一件小事显示侧栏，而不是，也许有什么办法可以解决这个问题！我只是发现当我手动重新加载页面时，它会工作，否则not@HellorhighWater是的，

$（document）.ready

只运行一次。当你加载页面时，我只添加完整的HTML，你能给我一个媒体查询的例子吗：）