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敏感查詢隱藏內容，直到用戶點擊

回答

相關問題