0

私はこのhtmlコードを持っています.2番目のdivが非表示になったときに最初のdivがすべての幅をつかむようにしたいのですが、これは機能しますが、ブートストラップ5.1でより優雅な方法で実行できるかどうか知りたいです:

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
    <div class=container-fluid>
        <div class="row">
            <div id="canvas" class="w-75 border">
                <p>Hi there</p>
            </div>
            <div id="submenu" class="w-25 visible">
                <p>you there</p>
            </div>
        </div>
    </div>
    <button id="button1" type="button" class="btn btn-primary">Click</button>
    <script>
        const btn = document.getElementById('button1')
        const canvas = document.getElementById('canvas')
        const subMenu = document.getElementById('submenu')
        btn.addEventListener('click', ()=>{
            console.log('I am clicked')
            if(subMenu.classList.contains('visible')){
                canvas.classList.remove('w-75')
                canvas.classList.add('w-99')
                subMenu.classList.remove('visible')
                subMenu.classList.add('invisible')
                
            } else {
                canvas.classList.remove('w-99')
                canvas.classList.add('w-75')
                subMenu.classList.remove('invisible')
                subMenu.classList.add('visible')
            }
        })
    </script>
</body>
</html>

4

1 に答える 1

1

w-75、w-25 の代わりに列を使用する必要があります。次に、最初の列を自動レイアウトcolにして、他の列が非表示になったときに幅がいっぱいになるようにします。またd-none、可視の代わりに使用...

<div class="container-fluid">
    <div class="row">
        <div id="canvas" class="col border">
            <p>Hi there</p>
        </div>
        <div id="submenu" class="col-3">
            <p>you there</p>
        </div>
    </div>
</div>

const btn = document.getElementById('button1')
const canvas = document.getElementById('canvas')
const subMenu = document.getElementById('submenu')
btn.addEventListener('click', () => {
    console.log('I am clicked')
    if (subMenu.classList.contains('d-none')) {
        subMenu.classList.remove('d-none')
    } else {
        subMenu.classList.add('d-none')
    }
})

https://codeply.com/p/VsC8j2BlF9

また、Bootstrap の折りたたみコンポーネントを使用する方が簡単です。その後、追加の JavaScript は必要ありません。

https://codeply.com/p/tBb263fzdp

于 2021-08-06T10:02:49.413 に答える