javascript - 我怎样才能有一个可折叠的按钮只显示在移动设备上？

Question

对于大屏幕，我希望只显示列表而不显示可折叠按钮，而当涉及到移动设备时，我希望此按钮像这样显示。我试过将 hidden-lg 或 visible-xs 放在 button 标签上，但它会删除大屏幕的整行。我怎样才能让可折叠按钮只显示在移动设备上？提前致谢!

 <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;    
    }
}

Answer 1

@Deebs，我扩展了你的提议，因为我相信移动设备的预期行为是隐藏 #demo div 并在单击 #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>