jQuery 引入 "offcanvas" 滑入式菜单的功能不起作用

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 引入 "offcanvas" 滑入式菜单的功能不起作用

jQuery Function to bring in "offcanvas" slide-in menu is not working

javascript

jquery

navbar

responsive-design

twitter-bootstrap