[英]Remove element level display: none using CSS
I have a page that hides a div when the screen is small, showing another div with a clickable + to expand the hidden div.我有一个页面,当屏幕很小时隐藏一个 div,显示另一个带有可点击 + 的 div 以展开隐藏的 div。
@media screen and (max-width: 1230px) {
#details_Title {
display: none;
}
#details_Details {
display: inline; // THIS DOES NOT WORK AFTER JQUERY SLIDEUP
}
}
@media screen and (max-width: 990px) {
#details_Title {
display: inline;
}
#details_Details {
display: none;
}
}
The HTML HTML
<div id="details_Title" onclick="showDetails()">
<b>Details</b>
<img id="imgPlusMinus" src="images/plus.png"/>
</div>
<div id="details_Details">
.... the details
</div>
JS JS
function showDetails() {
var img=document.getElementById('imgPlusMinus').src;
if (img.indexOf('plus.png')!=-1) {
document.getElementById('imgPlusMinus').src ='images/minus.png';
$("#details_Details").slideDown();
}
else {
document.getElementById('imgPlusMinus').src='images/plus.png';
$("#details_Details").slideUp();
}
}
Make the screen small, the divs show and hide correctly, click the + and the div details_Details expands as expected.使屏幕变小,div 正确显示和隐藏,单击 + 并且 div details_Details 按预期展开。
The problem is that if you close it and jQuery slides up the div details_Details, display: none is applied at the element level and the display: inline from the media query does not get applied.问题是,如果您关闭它并且 jQuery 向上滑动 div details_Details,则在元素级别应用display: none并且不会应用来自媒体查询的display: inline 。 How do I get around this?
我该如何解决这个问题? Can I remove/overwrite the element level style from the media query?
我可以从媒体查询中删除/覆盖元素级别样式吗?
$('#click').on('click', function() { $('#toggle').toggle(); });
@media(min-width:767px){ #toggle{ display: block;important: } } #click{ display; none: } @media(max-width:767px){ #click{ display; block: } #toggle { display; none; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="click">click</div> <div id="toggle">always show above 767px</div>
Add a declaration for min-width
so it will show no matter what.为
min-width
添加一个声明,以便无论如何它都会显示。
@media screen and (min-width: 1230px) {
#details_Details {
display: inline!important; // THIS WILL WORK AFTER JQUERY SLIDEUP
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.