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

Question

我需要一些支持来完成我苦苦挣扎了一段时间的 jQuery 功能。

我在 div 和 类 mnu2 mob_hide 中有一个 HTML 内容。此内容对于页面宽度大于 500 像素的内容应始终可见，如果宽度小于 500 像素则应隐藏。我正在使用 CSS 媒体查询进行此操作，并且效果很好。

我还有一个 slideToggle() 函数，它应该 show/hide 根据用户需求 HTML 页面宽度小于 500px 的内容。

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

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

此处提供当前代码： JSFIDDLE

现在我想到的第一个方案：可以增加一个jquery函数来检查屏幕宽度，当页面宽度大于500px时显示HTML内容。此代码的问题在于，一旦该函数触发，即使页面宽度小于 500 像素，内容仍然可见。代码如下，我没有在JSFIDDLE中故意添加：

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',
        });
    }               
});

是否有办法通过 jQuery 或 CSS 再次隐藏宽度小于 500px 的 HTML 内容，同时保持 slideToggle() 功能？ 任何反馈将不胜感激！

Answer 1

我认为对于这种情况，您可以在不使用 javascript 的情况下找到解决方案：

为切换元素使用隐藏的复选框，然后应用这些样式规则：

1. 对于移动设备show/hide基于复选框状态的内容。
2. 对于桌面大小，始终显示内容。

---

此示例基于您的代码：

<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>

这是用于测试它的工作 jsfiddle 代码：http://jsfiddle.net/kbm3t2s4/2/