jQuery的显示和切换功能不起作用

为了快速介绍这一点，我正在做一个网页设计入门课程，我们需要在我们的站点上拥有一个基本的过滤器功能，我们被告知要使用按类过滤器。

对于我的网站，我正在按流派过滤音乐专辑的封面，但我希望它们能够属于同一流派。到目前为止，我编写的代码可以很好地隐藏专辑的所有封面元素，但不会仅显示我想要的那些。

我在调试中有一些评论，我也尝试过其中的一行以更具体地显示要显示的div，即具有多个类的div。

$("ul.rock").click(function() {
        console.log("rock clicked");
        $("div.recordElement").toggle();
        $("div.recordElement.pop").toggle();
        $(".dropDownMenu").toggle();
    });

带有dropDownMenu类的div也需要隐藏，因为它是一个下拉菜单，用户可以从中选择一个流派，该流派在用户做出选择后需要隐藏。

<div id="dropDownMenu" class="dropDownMenu">
                    <ul class="rock">Rock</ul>
                    <ul class="pop">Pop</ul>
                    <ul class="metal">Metal</ul>
                    <ul class="alternative">Alternative</ul>
                    <ul class="country">Country</ul>
                </div>
            </div>
            <div id="inStoreRecordsContainer">
                <div class="recordElement" class="pop">
                    <img src="img/inStoreMusic/bowie.jpg">
                    <p class="recordInfo">David Bowie<br>Aladdin Sane</p>
                </div>
                <div class="recordElement" class="rock" class="metal">
                    <img src="img/inStoreMusic/metallica.jpg">
                    <p class="recordInfo">Metallica<br>Master of Puppets</p>
                </div>
                <div class="recordElement" class="rock" class="pop">
                    <img src="img/inStoreMusic/nirvana.jpg">
                    <p class="recordInfo">Nirvana<br>Nevermind</p>
                </div>
                <div class="recordElement" class="pop">
                    <img src="img/inStoreMusic/blink182.jpg">
                    <p class="recordInfo">Blink 182<br>California</p>
                </div>
                <div class="recordElement" class="pop">
                    <img src="img/inStoreMusic/beatles.jpg">
                    <p class="recordInfo">The Beatles<br>Sgt. Pepper's Lonely Hearts Club Band</p>
                </div>
                <div class="recordElement" class="pop">
                    <img src="img/inStoreMusic/beyonce.jpg">
                    <p class="recordInfo">Beyoncé<br>Beyoncé <i>(not a typo)</i></p>
                </div>
                <div class="recordElement" class="country">
                    <img src="img/inStoreMusic/cash.jpg">
                    <p class="recordInfo">Jonny Cash<br>CASH</p>
                </div>

难道我正在尝试使用一个以上类的元素来执行此操作？我尝试使用Google搜索来寻找解决方案，而其他用户则通过将显示/隐藏替换为切换来解决了相同的问题，而这两个都不对我有用。