Javascript 使用媒体查询切换（滑动）隐藏的div

因此，我这里有一个内容div

，在使用媒体查询移动时隐藏，我想做的是按下标题

切换（滑动）隐藏的内容div

HTML代码：

<div class="container">
    <div class="blocks">
        <div class="head">Head Title</div>
        <div class="content">Content Text</div>
    </div>
    <div class="blocks">
        <div class="head">Head Title</div>
        <div class="content">Content Text</div>
    </div>
    <div class="blocks">
        <div class="head">Head Title</div>
        <div class="content">Content Text</div>
    </div>            
</div>

我用Javascript尝试了这种方法，但不起作用：

$( ".head" ).click(function() {
$( "#content" ).toggle();
});

我不能让它工作，我会感激一些想法，谢谢

$(document).ready(function () {
    $(".head").click(function () {
        $(this).next(".content").toggle();
    });
});

---

在代码中，您没有正确选择“内容”选择器：您正在搜索id为=“content”的元素，该元素在HTML中不存在。只要HTML结构保持原样，上面的代码就可以为单击的head元素找到并切换相应的内容元素。

@Regent是的，我不是JS的大师，但我添加了我尝试过的方法。我没有看到任何ID为

content

的元素。但我确实看到了类

内容
的元素。使用
$（'.content'）
它可以工作：。如果将浏览器的大小调整为小于
560px
断点，则
content
div将消失，并提示您使用标题切换其可见性。到目前为止，这是预期的输出。切换
content
div后，将浏览器调整回原始状态（大于
560px
）。此时，您将注意到
内容
div保持隐藏状态，并且不会返回到
显示：块。只有在刷新浏览器后，
内容
div才会重新出现。当您将窗口的大小调整为大于
560px
时，将显示
content
div，而不是将其切换为隐藏。@ValeriCrudu发生这种情况是因为.toggle（）将向您的content div添加一个内联样式属性，该属性将覆盖.css文件中声明的任何内容。我不知道是否有任何聪明的方法可以避免它，但我想作为最后的手段，您可以随时在window.resize事件上触发来修复它：。
$(document).ready(function () {
    $(".head").click(function () {
        $(this).next(".content").toggle();
    });
});