Question

我有4个div，每个div都有一个按钮，当单击div上的按钮时，它应该隐藏该div。然后在顶部有一个名为show all的按钮，它将再次显示所有隐藏的div，下面是所有代码show button，JS脚本和四个div框，当单击它们时它们应该隐藏，并在单击show button时再次显示所有框< / p>

<button type="button" class="btn btn-light btn-sm mt-3" id="show"><i class="fe fe-eye"></i> Show all</button>

<script type = "text/javascript" >
                    function show(elementId) {
                        document.getElementById("id1").style.display = "none";
                        document.getElementById("id2").style.display = "none";
                        document.getElementById("id3").style.display = "none";
        document.getElementById("id4").style.display = "none";
                        document.getElementById(elementId).style.display = "block";
                    }
            </script>

<div class="card project-card" id="id1">
            <div class="card-header">
                    Bookmarks</strong>
                <button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
            </div>
                <div class="card-body">
                  body text here  
                </div>
        </div>

        <div class="card project-card" id="id2">
            <div class="card-header">
                    Bookmarks</strong>
                <button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
            </div>
                <div class="card-body">
                  body text here  
                </div>
        </div>

        <div class="card project-card" id="id3">
            <div class="card-header">
                    Bookmarks</strong>
                <button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
            </div>
                <div class="card-body">
                  body text here  
                </div>
        </div>

        <div class="card project-card" id="id4">
            <div class="card-header">
                    Bookmarks</strong>
                <button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
            </div>
                <div class="card-body">
                  body text here  
                </div>
        </div>

Answer 1

只需将div的显示设置为block或none即可将其隐藏。

let show = document.getElementById('show-button');
let divs = document.getElementsByName('container');
let hideButtons = document.getElementsByName('hide-button');

show.onclick = () => {
    divs.forEach((d) => d.style.display='block');
}

hideButtons.forEach((b) => {
    b.style.display='block';
    b.onclick = () => b.parentNode.style.display='none';
});

<button id='show-button'>Show</button>
<div name='container'>
  <button name='hide-button'>Hide 1</button>
</div>
<div name=container>
  <button name='hide-button'>Hide 2</button>
</div>
<div name=container>
  <button name='hide-button'>Hide 3</button>
</div>
<div name=container>
  <button name='hide-button'>Hide 4</button>
</div>

隐藏显示不同的div并使用按钮显示全部

1 个答案: