javascript - 如何将 <div> 水平扩展到 100% 宽度？

Question

我希望能够在点击时展开一个 div，以使该 div 占据 100% 的宽度。现在，有两个视频并排播放，当点击一个视频时，我希望它扩展到全宽并最小化另一个视频。这是我的代码，我不明白为什么这个简单的 javascript 不能解决问题:

function expandRight() {
    document.getElementsByClassName('.left').setAttribute("style","width:100%");
    document.getElementsByClassName('.left').style.width='100%';
}

.full-width{
        width: 100%;
    }

    .flex{
        display: -webkit-flex;
        display: flex;
    }

    .nav{
        position: absolute;
        -webkit-flex-direction: column;
        flex-direction: column;
        height: calc(100vh - 100px);
    }

    .header__menu{
        height: 100px;
        background-color: rgba(0,0,255,0.5);
    }

    .nav__video{
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        height: 100%;
        cursor: pointer;
    }

    .left, .right {
        width: 50%;
        height: 100%;
        transition: 0.6s ease-in-out;
    }

    .nav__video--left, .nav__video--right{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    video{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

  <nav>
            <div class="nav flex full-width">
                <div class="nav__video flex full-width">
                    <div class="left">
                        <div class="nav__video--left" onclick="expandRight()">
                            <video playsinline autoplay muted loop>
                            <!--- Inlcude the video files with .webm file first --->
                                <source src="assets/videoLeft/loop.webm">
                                <source src="assets/videoLeft/loop.mp4">
                                <source src="assets/videoLeft/loop.mov">
                            </video>
                        </div>
                    </div>
                    <div class="right">
                        <div class="nav__video--right" onclick="expandLeft()">
                            <video playsinline autoplay muted loop>
                            <!--- Inlcude the video files with .webm file first --->
                                <source src="assets/videoRight/loop.webm">
                                <source src="assets/videoRight/loop.mp4">
                                <source src="assets/videoRight/loop.mov">
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <script src="js/scripts.js"></script>

非常感谢这里的任何帮助，谢谢。

Answer 1

只需确保您拥有正确的 HTML 结构和 CSS 类即可。

var div1 = document.getElementById("left");
var div2 = document.getElementById("right");
var reset = document.getElementById("reset");

div1.addEventListener("click", function(e){ 
  growShrink(this, div2); 
});

div2.addEventListener("click", function(e){ 
  growShrink(this, div1); 
});

reset.addEventListener("click", function(e){
 growShrink(null, null, true);
});


function growShrink(g, s, r){
  if(r){
      div1.setAttribute("class", "content"); 
      div2.setAttribute("class", "content");
      return;
  }
  g.setAttribute("class", "expanded");
  s.setAttribute("class", "shrunk");
}

#wrapper { padding:0; }
div { border: 1px dashed black; }
.content { 
  width:49.5%; float:left; margin:0; 
}

}
.expanded { width:100%; }
.shrunk { display:none;}

<div id="wrapper">
  
  <div id="left" class="content">L E F T</div>
  <div id="right" class="content">R I G H T</div>
  
</div>

<button id="reset">Reset</button>