使用 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 个版本）。但这可能并不完全准确。

你可以在我建立的网站上看到这种效果。它正在注册表单底部的风格化单选按钮上工作。

编辑 在这里，我做了一个美丽的小提琴。

我很抱歉没有正确修改您的代码，但希望这足以说明我的想法。