如何使用开关打开 Bootstrap v5 Offcanvas？

Question

我要打开Bootstrap V5 Offcanvas using Bootstrap switches 技巧很简单，当输入字段被选中时，Offcanvas 应该打开，当 Offcanvas 关闭时，选中的应该被删除。

我的代码：

<!-- I want to Use checkbox switches to open the offcanvas -->
<div class="form-check form-switch">
    <input type="checkbox" id="offcanvas-toggler" class="form-check-input" />
</div>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
        </div>
    </div>
</div>

参考资料：

https://getbootstrap.com/docs/5.0/forms/checks-radios/ https://getbootstrap.com/docs/5.0/components/offcanvas/

Answer 1

你可以这样做..

var toggle = document.getElementById("offcanvas-toggler")
var offcanvas = new bootstrap.Offcanvas(document.getElementById("offcanvasExample"), {backdrop: false})
toggle.addEventListener("change", function(){
    toggle.checked ? offcanvas.show() : offcanvas.hide() 
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<!-- I want to Use checkbox switches to open the offcanvas -->

<div class="form-check form-switch">
    <input type="checkbox" id="offcanvas-toggler" class="form-check-input" />
</div>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>

Demo

如何使用开关打开 Bootstrap v5 Offcanvas？

How to open Bootstrap v5 Offcanvas using switches?

html

css

sass

bootstrap-5