邊欄影片在加載時一直播放

在我的網站上有一個側邊欄，但是當我加載頁面時，它會播放關閉的影片。我將如何阻止這個？

我有一個類#sidebar，它是處于正常狀態的類和一個使其移出的活動類

#sidebar {
   margin-left: -250px;
   width: 250px;
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   z-index: 0;
   background: #222222;
   color: #fff;
   transition:  0.3s;
   visibility: hidden;
}

#sidebar.active {
   width: 250px;
   margin-left: 0px;
   transition:  0.3s;
   z-index: 999;
   visibility: visible;
}

用于更改活動類的 Javascript

        $(document).ready(function () {
        $("#sidebar").mCustomScrollbar({
            theme: "minimal"
        });

        $('#sidebarCollapse').on('click', function () {
            $('#sidebar, #content').toggleClass('active');
            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });
    });

更新

側邊欄的 Html 代碼。如果它有幫助，我正在使用 mustache js 進行模板化，如果這對此很重要

<!-- Sidebar  -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <h3>Admin Panel</h3>
        </div>

        <ul class="list-unstyled components">
            <p>Admin controls</p>
            <li>
                <a href="#menuSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Menu's</a>
                <ul class="collapse list-unstyled" id="menuSubmenu">
                    <li>
                        <a href="/newMenu">Add</a>
                    </li>
                    <li>
                        <a href="#">Edit</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#catSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Categories</a>
                <ul class="collapse list-unstyled" id="catSubmenu">
                    <li>
                        <a href="/newCat">Add</a>
                    </li>
                    <li>
                        <a href="#">Edit</a>
                    </li>
                </ul>
            </li>
                            <li>
                <a href="#dishSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Dish's</a>
                <ul class="collapse list-unstyled" id="dishSubmenu">
                    <li>
                        <a href="/newDish">Add</a>
                    </li>
                    <li>
                        <a href="#">Edit</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#staffSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Staff</a>
                <ul class="collapse list-unstyled" id="staffSubmenu">
                    <li>
                        <a href="#">Register</a>
                    </li>
                    <li>
                        <a href="#">Delete</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Site settings</a>
            </li>
            <li>
                <a id="logout" href="/logout" class="btn btn-primary">Sign out</a>
            </li>
        </ul>
    </nav>

uj5u.com熱心網友回復：

你可以試試下面的CSS

#sidebar {
   position: absolute;
   top: 0;
   left: -250px;
   bottom: 0;
   width: 250px;
   height: 100vh;
   z-index: 999;
   background: #222222;
   color: #fff;
   transition: 0.3s;
 }

 #sidebar.active {
    left: 0;
 }

另外，如果您想在默認情況下處于活動狀態，您還必須將活動課程傳遞給您的側邊欄

<nav id="sidebar" class="active">

標籤：javascript html jQuery css

上一篇：如何使用切換按鈕在本地存盤中保存div狀態（隱藏/顯示）

下一篇：按其值禁用選擇中的選項