带有javascript / jquery的菜单滑块

Question

我正在尝试为一家餐厅制作菜单滑块，其中包含两个可点击的菜单，午餐菜单和晚餐菜单。我不希望菜单在新窗口中打开，只需一个干净的点击即可打开所需的菜单。

这是我到目前为止的代码，我知道它需要很多工作，我是javascript / jQuery世界的新手。纯javascript会很酷，但任何jQuery都可以工作。

如果有人可以帮助我，请解释需要修复的内容，以便我能够理解这一点，我会非常感激。谢谢You. On codepen

let lunchContainer = document.querySelectorAll('div.lunchmenu');
        dinnerContainer = document.querySelectorAll('div.dinnermenu');

function reset() {
    for(let i = 0; i < lunchContainer.length; i++) {
        lunchContainer[i].style.display = 'none'; 
        dinnerContainer[i].style.display = 'none'; 
    }
};

$('.lunch').click(function(event) {
    reset();
    $('.lunchmenu').addClass('active');
    lunchContainer.style.display = 'block';
});

$('.dinner').click(function() {
    reset();
    $('.lunchmenu').removeClass('active');
});

$('.dinner').click(function(event) {
    reset();
    $('.dinnermenu').addClass('active');
    // dinnerContainer.style.display = 'block';
});

$('.lunch').click(function() {
    reset();
    $('.dinnermenu').removeClass('active');
    // dinnerContainer.style.display = 'block';
});

<div class="page">
    <div class="header">
        <div class="logoHeader">
            <a href="index.html" >
                <img class="crab" src="http://images.all-free-download.com/images/graphicthumb/vivid_hand_drawn_crab_decoration_pattern_vector_551463.jpg " alt="KingChef Krab logo">
            </a>
            <h1 id="titleHeader">
                King Chef
            </h1>
        </div>
        <nav class="menuHeader">
            <a class="specMenu" href="about.html">about</a></li>
            <a class="specMenu" href="team.html">team</a></li>
            <a class="specMenu" href="menus/dinner.html">menu</a></li>
            <a class="specMenu" href="#">news</a></li>
            <a class="specMenu" href="#">hours</a></li>
            <a class="lastMenu" href="#">reservations</a></li>
        </nav>
    </div>
    <nav id="menuCategory">
        <a class="menuStyles lunch" href="#lunch">lunch</a>
        <a class="menuStyles dinner" href="#dinner">dinner</a>
    </nav>

    <div class="container">
        <div class="lunchmenu">
            <p>hehehfdsafhkalfj</p>
        </div>

        <div class="dinnermenu">
            <p>hdhfsahf</p>
        </div>
    </div>
</div>

.lunchmenu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    &.active {
        display: block;
    }
}

.dinnermenu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    &.active {
        display: block;
    }
}

Answer 1

注意我删除了多少代码！如果您要使用“活动”类来完成该工作，则无需设置显示，也无需定义按钮上两次单击的行为。

此外，如果每个菜单都有一个容器，则不需要遍历其中的所有项目以将其显示设置为none，将父容器设置为none就足够了。

希望有所帮助！

let lunchContainer = document.querySelectorAll('.lunchmenu'), // notice ',' instead of ';'
    dinnerContainer = document.querySelectorAll('.dinnermenu');
        
        
$('.lunch').click(function(event) {
    $('.dinnermenu').removeClass('active');
    $('.lunchmenu').addClass('active');
            
});
        
$('.dinner').click(function() {
    $('.lunchmenu').removeClass('active');
    $('.dinnermenu').addClass('active');
});
        

   

.lunchmenu, .dinnermenu {
  display:none;
}

.active {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="lunch">lunch</button>

<button class="dinner">dinner</button>

<div class="lunchmenu">
    <h5>lunch menu yayyy</h5>
    <p>item lunch 1</p>
    <p>item lunch 2</p>
</div>
<div class="dinnermenu">
    <h5>Dinner menu yayyy</h5>
    <p>itemdinner 1</p>
    <p>item dinner 2</p>
</div>