移除元素级显示：无使用 CSS

Question

我有一个页面，在屏幕很小的时候隐藏了一个 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;
    }
}

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

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();
    }
}

屏幕变小，div显示和隐藏正确，点击+，div details_Details按预期展开。

问题是，如果你关闭它并且 jQuery 向上滑动 div details_Details，display: none 将应用于元素级别，而 display: inline 来自媒体查询未得到应用。我该如何解决这个问题？我可以从媒体查询中删除/覆盖元素级别样式吗？

Answer 1

$('#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>

为min-width 添加一个声明，这样无论如何它都会显示出来。

@media screen and (min-width: 1230px) {
    #details_Details {
        display: inline!important; // THIS WILL WORK AFTER JQUERY SLIDEUP
    }
}