Question

所以我在这里有一个内容div <div class="content">，当使用媒体查询进行移动时隐藏了，我想要做的是按下头部标题<div class="head">来切换（滑动）隐藏的内容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>

CSS：

/* Responsive Media Queries */

@media screen and (max-width: 560px) {
    .content { display: none; }
}

我用Javascript尝试过这种方式，但不起作用：

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

我不能让它发挥作用，我会感激一些想法，谢谢！

Answer 1

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

在您的代码中，您没有获得＆＃34;内容＆＃34;选择权：您正在搜索id =＆＃34; content＆＃34;哪个不存在于您的HTML中。上面的代码将明确地找到＆amp;只要您的HTML结构保持不变，就可以为单击的head元素切换相应的content元素。

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

1 个答案: