CSS敏感查询隐藏内容，直到用户点击

我试图创建一个div，将显示其内容，如果屏幕最大宽度：480px是。CSS敏感查询隐藏内容，直到用户点击

但是，当我缩放窗口时，即使用户没有点击触发按钮，它也会出现。我怎么能隐藏一个特定的div标签，至少在用户点击它之前？可以用jQuery或CSS完成吗？

$(document).ready(function() { 
 
    $(".slide-toggle").click(function() { 
 
    $(".box").slideToggle(); 
 
    }); 
 
});

@media only screen and (max-width: 480px) { 
 
    .box { 
 
    display: block; 
 
    } 
 
    .box-inner { 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
    } 
 
    .slide-toggle { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="slide-toggle">Slide Toggle</button> 
 
<hr> 
 
<div class="box"> 
 
    <div class="box-inner"> 
 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p> 
 
    </div> 
 
</div>

来源

2017-04-20 DaF-Student

请尝试.box的{显示：无;} – selvarajmas

你需要为> 480像素，默认的“箱子”类“显示：无;”另一种CSS规则，如果你不希望它显示在不全部在更大的屏幕上。 – ADyson

，你可以达到你想要的东西，不添加任何进一步的jQuery，只有CSS

看到片段：

$(document).ready(function() { 
 
    $(".slide-toggle").click(function() { 
 
    $(".box").slideToggle(); 
 
    }); 
 
});

.slide-toggle { 
 
    display: none; 
 
} 
 

 
@media only screen and (max-width: 480px) { 
 
    .box-inner { 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
    } 
 
    .box { 
 
    display: none; 
 
    } 
 
    .slide-toggle { 
 
    display: block; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 481px) { 
 
    .box { 
 
    display: block!important; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="slide-toggle">Slide Toggle</button> 
 
<hr> 
 
<div class="box"> 
 
    <div class="box-inner"> 
 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p> 
 
    </div> 
 
</div>

来源

2017-04-20 14:41:41 Chiller

是的，代码的作用就像一个魅力，但我可能忘了告诉或你跳过，这一次盒子内容出现时，我调整窗口全屏。 –

@ DaF-Student是的，我打算这么做......在全屏显示框中，并将其隐藏在小屏幕中，并在小屏幕中显示它与按钮...和按钮隐藏在全屏幕中，但显示在小屏幕上，那是我所做的，是不是这样？ – Chiller

当然，我试图在div标签中放置一些名为box-inner的链接，并将它分别设置为小屏幕和大屏幕。我认为剩下的只能用CSS来完成，对吧？ –

文档后准备做这个

$(".box").hide();

，并在单击事件你只是再次显示它：

$(".box").show();

来源

2017-04-20 14:33:18

实际上我对如何使用“点击事件”和“文档准备功能”没有清楚的想法，但我会尽力学习。 –

这是怎么我通常做它。

隐藏元素最初与CSS：

#div_selector { display:none; }

然后，用jQuery显示它的点击

$('#click_element').on('click', function(){ 
     $('#div_selector').show() 

     //alternatively, you can do this to show/hide toggle on click 
     $('#div_selector').toggle('show')   
});

来源

2017-04-20 14:37:55 rob

CSS敏感查询隐藏内容，直到用户点击

回答

相关问题