如何让可折叠按钮仅针对移动设备显示

how can I have a collapsible button to show for mobile only?

本文关键字：移动 显示 可折叠 按钮      更新时间：2023-09-26

对于大屏幕，我希望只显示列表而不显示可折叠按钮，而在移动设备上，我希望这个按钮像这样显示。我尝试在button标签上放置hidden-lg或visible-xs，但它删除了大屏幕的整行。如何让可折叠按钮仅针对移动设备显示？提前感谢！

 <button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
      <span class="glyphicon glyphicon-collapse-down"></span> Show
    </button>
    <div id="demo" class="collapse">
      <ol class="list-group">
          <li class="list-group-item">Warrior</li>
          <li class="list-group-item">Adventurer</li>
          <li class="list-group-item">Mage</li>
      </ol>
    </div>

自定义.js

$(function(){
  $('#demo').on('hide.bs.collapse', function () {
    $('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show');
  })
  $('#demo').on('show.bs.collapse', function () {
    $('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide');
  })
})

我也试过

#demo{
    display: none;    
}
@media (min-width: @screen-md-min) {
    #demo{
        display: block;    
    }
}

@Deebs，我扩展了您的建议，因为我相信移动设备中的预期行为是隐藏#demodiv并在单击#button时显示/隐藏。

// Pure JS
document.getElementById("button1").addEventListener("click", function() {
    var disp = document.getElementById("demo1").style.display;
    document.getElementById("demo1").style.display = disp === "" || disp == "none" ? "block" : "none";
    this.innerHTML = disp === "" || disp === "none" ? "Hide" : "Show";
});
// jQuery
$("#button2").on("click", function() {
    $("#demo2").toggle();
    $("#button2").text( $("#demo2").css("display") === "block" ? "Hide" : "Show" );
});
#demo1, #demo2 {
    display:none;
}
#button1, #button2 {
    display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><strong>Pure JS:</strong></p>
<button id="button1" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-collapse-down"></span> Show</button>
<div id="demo1" class="collapse">
    <ol class="list-group">
        <li class="list-group-item">Warrior</li>
        <li class="list-group-item">Adventurer</li>
        <li class="list-group-item">Mage</li>
    </ol>
</div>
<p><strong>jQuery:</strong></p>
<button id="button2" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="glyphicon glyphicon-collapse-down"></span> Show</button>
<div id="demo2" class="collapse">
    <ol class="list-group">
        <li class="list-group-item">Warrior</li>
        <li class="list-group-item">Adventurer</li>
        <li class="list-group-item">Mage</li>
    </ol>
</div>

你问题的措辞有点令人困惑......您的媒体查询看起来很时髦。 尝试

#demo{
    display: none;
}
@media screen and (min-width: 780px) {
    #demo{
        display: block;    
    }
}

这将使演示div 隐藏在小于 780px 的屏幕上，并在宽度超过 780px 的屏幕上可见。 如果要隐藏/显示按钮本身，还必须添加该CSS。

相关文章：