我希望能够在点击时展开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>
非常感谢任何帮助，谢谢。
答案 0 :(得分：4)
确保您拥有正确的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>
答案 1 :(得分：2)
简答：
您的javascript中有几个问题需要解决：
function expandRight() {
document.getElementsByClassName('.left').setAttribute("style","width:100%");
document.getElementsByClassName('.left').style.width='100%';
}
1）正如您可能已经意识到的那样，您不需要这两个陈述，因为它们都做同样的事情，这需要我们......
function expandRight() {
document.getElementsByClassName('.left').style.width='100%';
}
2）但问题的类名不是 .left，它是left，它将我们带到......
function expandRight() {
document.getElementsByClassName('left').style.width='100%';
}
3）当您使用getElementsByClassName或getElementsByTagName时，您正在收集整个节点列表。因此，如果您只需要该节点列表中的一个项目，则必须显式声明该节点列表项的索引。
在这种情况下，只有一个元素具有类名left，因此元素是节点列表中的第一个项，即。 document.getElementsByClassName('left')[0]。
你会看到（除了你需要解决的所有其他事情），
function expandRight() {
document.getElementsByClassName('left')[0].style.width='100%';
}
现在有效。
稍长答案
如果你考虑上面的步骤，然后确保当函数将一个div的宽度增加到100％时，它同时将另一个div的宽度减小到0，你最终会得到类似下面的内容：
var leftBox = document.getElementsByClassName('left')[0];
var rightBox = document.getElementsByClassName('right')[0];
function expandLeft() {
rightBox.style.width='100%';
leftBox.style.width='0';
}
function expandRight() {
leftBox.style.width='100%';
rightBox.style.width='0';
}.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%;
border: 1px solid rgb(0,0,0);
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>
答案 2 :(得分：0)
您可以使用Jquery为这两个视频制作动画，它看起来非常好并且非常简单。
我使用.animate快速创建了一个小例子，查看JSFiddle。
答案 3 :(得分：0)
这里是香草JS中KenSchnetz脚本的一个版本，以防其他阅读者只需要坚持这一点（您可以在底部找到指向更新的JSFiddle的链接）：
var screenWidth = window.innerWidth,
videoA = document.getElementById('a'),
videoB = document.getElementById('b');
function toggleSize(video, moveLeftOnExpand, z, w, h, l) {
if (!moveLeftOnExpand) {
video.style.zIndex = z;
video.style.width = w;
video.style.height = h;
} else {
video.style.zIndex = z;
video.style.width = w;
video.style.height = h;
video.style.left = l;
}
}
document.addEventListener('click', function(e) {
switch(e.target) {
case videoA:
if (videoA.clientWidth < screenWidth) {
toggleSize(videoA, false, 2, '100%', '80vh');
} else {
toggleSize(videoA, false, 1, '50%', '50vh');
}
break;
case videoB:
if (videoB.clientWidth < screenWidth) {
toggleSize(videoB, true, 2, '100%', '80vh', 0);
} else {
toggleSize(videoB, true, 1, '50%', '50vh', '50%');
}
break;
}
}, false);