jQuery根据CSS元素和slideToggle（）状态属性显示隐藏的DIV

我需要一些支持来完成一个jQuery函数，我一直在苦苦挣扎

我在一个div中有一个HTML内容，其中包含类

mnu2 mob\u hide

。当页面宽度大于500px时，此内容应始终可见，如果宽度小于500px，则应隐藏此内容。我用CSS媒体查询来做这件事，它工作得很好

我还有一个slideToggle（）函数，可以根据用户需求显示/隐藏页面宽度小于500px的HTML内容

问题如下-对于小于500px的页面宽度，如果内容通过slideToggle（）显示，然后再次隐藏，并且用户以大于500px的宽度调整屏幕大小，则不会再次显示HTML内容

我假设slideToggle（）函数中的CSS规则覆盖CSS媒体规则，并且内容保持隐藏。我需要解决这个问题

此处提供了当前代码：

现在我想到的第一个解决方案是：可以添加一个额外的jquery函数来检查屏幕宽度，并显示页面宽度大于500px的HTML内容。此代码的问题是，一旦函数触发，即使页面宽度小于500px，内容仍然可见。代码如下，我并不是故意在JSFIDLE中添加的：

var filtermshow   =   jQuery.noConflict();

filtermshow(window).on('resize', function(){

    var win = filtermshow(this); //this = window
    if (win.width() >= 500) { 
        filtermshow('.mob_hide').css({
        display: 'block',
        });
    }               
});

有没有一种方法可以使HTML内容再次隐藏，宽度小于500px，或者通过jQuery或CSS，同时保持slideToggle（）功能？

---

任何反馈都将不胜感激

我认为对于这个场景，您可以找到一个不使用javascript的解决方案：

对切换元素使用隐藏复选框，然后应用以下样式规则：

对于移动设备，根据复选框状态显示/隐藏内容

对于桌面大小，始终显示内容

---

此示例基于您的代码：

<div>
    <input type="checkbox" id="menu2" />
    <label class="tri2" for="menu2"></label>
    <div class="content">
    ...
    </div>
</div>

<style>
#menu2 { display:none; } /* always hide the checkbox */
.content { overflow: hidden; }
.tri2 {
    background: #000;
    display: inline-block;
    height: 51px;
    width: 50px;
}

/* The mobile version */
#menu2 ~ .content { height: 0; } /* hidden when unchecked */
#menu2:checked ~ .content { height: auto; } /* displayed when checked */


/* The desktop version */
@media only screen and (min-width:501px) {
    .tri2 { display:none; } /* hide the mobile toggle button */
    #menu2 ~ .content{ display: block; height: auto; } /* always display content */
}
</style>

...
#menu2{display:none；}/*始终隐藏复选框*/
.content{溢出：隐藏；}
.tri2{
背景：#000；
显示：内联块；
高度：51px；
宽度：50px；
}
/*手机版*/
#menu2~.content{height:0；}/*未选中时隐藏*/
#menu2:checked~.content{height:auto；}/*选中时显示*/
/*桌面版*/
@仅介质屏幕和（最小宽度：501px）{
.tri2{display:none；}/*隐藏移动切换按钮*/
#menu2~.content{display:block；height:auto；}/*始终显示内容*/
}

---

下面是测试它的JSFIDLE代码：

这实际上接近genius解决方案！Philipp，感谢您抽出时间来开发如此简洁的代码。仅供参考：我必须更换高度：自动；`和<代码>高度：0带

显示：块和
显示：无尊重，因为内容菜单应用了其他样式，这导致它在
高度处可见：0