Question

我需要一些支持才能完成一个我正在努力的jQuery函数很长一段时间。

我在带有mnu2 mob_hide类的div中有HTML内容。对于页面宽度超过500像素，此内容应始终可见，如果宽度小于500像素，则应隐藏此内容。我正在使用CSS媒体查询这样做，它的工作正常。

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

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

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

此处提供了当前代码： JSFIDDLE

现在我想到的第一个解决方案：可以添加一个额外的jquery函数来检查屏幕宽度并显示大于500px的页面宽度的HTML内容。此代码的问题在于，一旦函数触发，即使页面宽度小于500px，内容仍然可见。代码如下，我没有故意在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（）功能？任何eedback将不胜感激！

Answer 1

我认为在这种情况下，您可以在不使用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>

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

jQuery显示基于CSS元素和slideToggle（）状态属性

1 个答案: