切换div的类以根据所单击的按钮显示/隐藏内容

我正在尝试根据为特定类别单击的按钮来显示/隐藏菜单项列表。最受欢迎的是默认/在页面加载时看到的。因此，例如，当我单击开胃者按钮时，页面应该从this转到this。

我对jQuery和JavaScript还很陌生，所以让它工作起来有些困难。以下是HTML (精简，只是想显示在屏幕截图中看到的内容，而不是所有其他菜单项)：

<div class="menu-container">
    <div class="menu-preview">
        <div class="menu-preview-items active">
            <h2>Most Popular</h2>
            <div class="menu-listing">
                <h3>California Roll (8 Pieces)</h3>
                <p>Imi crab, cucumber, avocado, and mayo with sesame</p>
                <p>$3.50</p>
            </div>
            <div class="menu-listing">
                <h3>Dynamite Roll (8 Pieces)</h3>
                <p>Two pieces prawn tempura, yam, cucumber, avocado, masago, letters, and mayo with sesame</p>
                <p>$4.95</p>
            </div>
        </div>
        <div class="menu-preview-items hidden">
            <h2>Appetizers</h2>
            <div class="menu-listing">
                <h3>Edamame</h3>
                <p>Boiled green soy bean with salt.</p>
                <p>$3.50</p>
            </div>
            <div class="menu-listing">
                <h3>Gomae</h3>
                <p>Blanched spinach with sesame seed and peanut sauce.</p>
                <p>$3.50</p>
            </div>
        </div>
    </div>
    <div class="menu-categories">
        <a href="#" class="menu-box">Most Popular</a>
        <a href="#" class="menu-box">Appetizers</a>
        <a href="#" class="menu-box">A La Carte</a>
        <a href="#" class="menu-box">BBQ</a>
        <a href="#" class="menu-box">Salad & Soup</a>
        <a href="#" class="menu-box">Tempura</a>
    </div>
</div>

下面是.active和.hidden类(以及容器)的CSS：

.active {
    display: none;
}

.hidden {
    display: contents;
}

.menu-container {
    margin-top: 15px;
    display: flex;
    justify-content: space-evenly;
}

下面是我到目前为止拥有的脚本(它放在文档的最底部，就在结束body标记的上方)：

$('.menu-box').click(function () {
    $('.menu-preview-items').toggleClass('.active');
    // alert('Hello!');
});

当然，随着时间的推移，我会为所有类别添加更多的菜单项，我只是想在我承诺这样做之前尝试让它工作。我应该在任何东西上添加id吗？我需要添加/编辑我的任何类名吗？任何帮助都将不胜感激！

转载请注明出处:http://www.jxbyjx.net/article/20230510/2497969.html