Question

我有两个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");
    }
});

我准备好了评论，我们可以通过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>

Answer 1

将脚本更改为此

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

你的选择器错了。

除非您与JavaScript有关，（例如Open＆amp; close菜单或添加/删除某些导航），我建议您使用CSS Media Queries。

@media (max-width: 12450px) { 
.navbar{
   color:red;
   }
}

请向MDN咨询如何使用它。 Reference Link

修改

我已将$(window).load()更改为$(document).ready()。请查看此问题以获取更多详细信息。

Difference between $(window).load() and $(document).ready() functions

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

1 个答案: