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我做了一个漂亮的小提琴。

我为没有正确修改代码而道歉，但希望这足以说明我的想法。

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

1 个答案: