Html 删除元素级显示：无使用CSS

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

缩小屏幕，正确显示和隐藏div，单击+并按预期展开div details\u details

问题是，如果关闭它，jQuery向上滑动div details\u details，display:none将应用于元素级别，而媒体查询中的display:inline将不会应用。我该怎么做？我可以从媒体查询中删除/覆盖元素级样式吗？

$（'click'）。在（'click'，函数（）上{
$（'#toggle'）。toggle（）；
});
@介质（最小宽度：767px）{
#拨动{
显示：块！重要；
}
}
#点击{
显示：无；
}
@介质（最大宽度：767px）{
#点击{
显示：块；
}
#拨动{
显示：无；
}
}

点击
始终在767px上方显示
我试图避免使用important，因为这不是很好的做法。在某些情况下，不一定是
！重要提示
将是一种不好的做法，在这种情况下，这是最好的方法。也当你申请的时候！这里很重要，它覆盖了@media屏幕和（最大宽度：990px），因此破坏了该对象。不，因为它仅在屏幕高于1230px时应用。您可以使用
addClass
和
removeClass
，而不是使用
toggle
，这将涉及更多的代码，但是在这种情况下，您可以省略
！重要
声明。
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();
    }
}