Question

我试图在互联网上搜索并没有解决我的问题。我创建了一个列表，我在其中使用transform：translate（-100％）将其修改为位于主屏幕下作为滑入式菜单。当主导航栏折叠到移动按钮时，我打算为按钮分配一个jQuery函数，以便滑入offcanvas菜单。但是，按钮无论如何都不响应，我需要一些帮助。非常感谢任何帮助！

    /..The main navbar../
    <nav class="main-navigation" role="navigation">
        <ul>
            <li class="products1"><a href="#2">Products</a></li>
            <li class="store1"><a href="#3">Store</a></li>
            <li class="about1"><a href="#4">About Us</a></li>
            <li class="discover1"><a href="#5">Discover</a></li>
            <li class="support1"><a href="#6">Support</a></li>
        </ul>
    </nav>

    <div class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                /..The button that dosen't work../
                <button class="navbar-toggle pro-toggle pull-left">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                /..The menu that I want to slide in but dosen't work../
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="products"><a href="#2">Products</a></li>
                        <li class="store"><a href="#3">Store</a></li>
                        <li class="about"><a href="#4">About Us</a></li>
                        <li class="discover"><a href="#5">Discover</a></li>
                        <li class="support"><a href="#6">Support</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

/..The main CSS for the slide-in menu../

<style>
.main-navigation {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    text-align: center;
    text-decoration: none;
    background-color: white;
    transform: translateX(-100%);
    transition: transform 1s ease;
}

.main-navigation.open {
    transform: translateX(0);
}
</style>

/..The jQuery function that is supposed to slide-in the menu../

<script>
    $(document).ready(function() {
        $('.pro-toggle').on('click', function(){
            ${'.main-navigation').toggleClass('open');
        });
    });
</script>

Answer 1

更改

从${'.main-navigation')到$('.main-navigation')。

jQuery函数引入＆＃34; offcanvas＆＃34;滑入式菜单无效

1 个答案: