jquery - 使用 CSS 打开或关闭 jQuery 元素@不同的屏幕尺寸

Question

我有一个网页(由 jQuery、Bootstrap 和数据库提供支持)旨在隐藏移动设备上的文章，仅显示样式为按钮的节标题。如果用户单击“简介”，该特定部分将打开，显示文本。用户还可以选择手动切换任何标题以打开或关闭它。

我想修改它，让它在大屏幕上反向工作；默认情况下应显示所有文本，但用户仍然可以手动切换各个部分。

我知道如何使用 JS 开关来做到这一点...

if( $(window).width() > 768 ) {
 // Scripts go here...
 } else {
}

我只是想知道是否还有一种方法可以用 CSS 来实现，比如这样......

@media all and (max-width: 768px) {    
 // Insert style that hides or reveals sections
}

这是我的 HTML 示例:

<section id="directions" data-toggle="collapse" data-target="#directions2" class="SecCon">
  <h2><span class="label label-primary"><small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small> Directions</span>  </h2>
  <div id="directions2" class="collapse in article">
    <p>Animals have the power of locomotion.</p>
  </div>
<section>

这些是控制关闭和打开的脚本......

<script>
$('.collapse').collapse('hide').on('show.bs.collapse', function (e) {
 var id = $(this).attr('id');
 $('section[data-target="#' + id + '"]').find('.only-expanded').show();
 $('section[data-target="#' + id + '"]').find('.only-collapsed').hide();

}).on('hide.bs.collapse', function () {
 var id = $(this).attr('id');
 $('section[data-target="#' + id + '"]').find('.only-expanded').hide();
 $('section[data-target="#' + id + '"]').find('.only-collapsed').show();
})
</script>

谁能告诉我可以使用什么 CSS 样式来使所有元素(部分)在更大的屏幕尺寸下打开，同时仍允许用户切换打开或关闭每个部分？

Answer 1

我不是百分百确定我理解这里的目标，但如果我的想法是正确的，那么抛出一个 display:none 或一个 display: [block|inline-block|whatever] 在你的媒体查询中应该这样做。如果您希望某个元素初始化隐藏，则选择 .show() 时(反之亦然)只需执行以下操作:

@media smaller screen {
    .collapsible_element {
        display:none;
    }
}

@media larger screen {
    .collapsible_element {
        display:block;
    }
}

和

<script>
    $('.collapsible_element')on('click', function() {
        $(this).toggle();
    });
</script>

您也可以使用 .show() 和 .hide() 手动完成，但是 .toggle() 非常干净。

或者你可以这样做:

<input type="checkbox" id="toggle_title">
<label for="toggle_title">Title</label>
<p class="collapsible_element">Lorem ipsum</p>

和

#toggle_title { //hidden checkbox
    display:none;
}

label { //your clickable title
    //styles
}

.collapsible_element {
    height:0px; //just for kicks
    transition: height 2s; //to make things smooth
}

@media smaller screen {
    .collapsible_element {
        height:0px; //inits to 0
    }
    #toggle_title:checked ~ .collapsible_element {
        height:35px; //expands when title is clicked causing our hidden box to be checked
    }
}

@media larger screen {
    .collapsible_element {
        height:35px;
    }
    #toggle_title:checked ~ .collapsible_element {
        height:0px; //the opposite
    }
}

这符合您的纯 css 版本。它相当干净，我相信它的兼容性足以通过现代网络的测试(2 或 3 个版本)。但这可能并不完全准确。

您可以在我建立的网站上看到这种效果。它正在处理 the registration form 底部的程式化单选按钮。 .

编辑 和here在我制作的美丽 fiddle 中。

对于没有正确修改您的代码，我深表歉意，但希望这足以说明我的想法。