Question

我试图在显示和隐藏菜单的函数中更改正文onclick的背景不透明度。类似于模态框的效果。我尝试使用document.getElementsByTagName("body")执行此操作，但似乎无法更改它。

＆＃13;

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.getElementsByTagName("body")[0].style.opacity = "0.5";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementsByTagName("body")[0].style.opacity = "0.5";
}

$('body').click(function() {
  $(this).toggleClass('a b');
});

＆＃13;

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.4s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testDiv">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
</div>
</div>

＆＃13;

Codepen：https://codepen.io/88zero/pen/qYZxaE

Answer 1

您可以只使用

[(X1, X2), (X1, X3), (X2, X3)]

不使用document.body.style.opacity = 1;。

Answer 2

getElementsByTagName将返回一个元素数组。在身体情况下将只返回一个。但是你仍然需要直接定位它。

您可以使用下一个代码：

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.getElementsByTagName("body")[0].style.opacity = "0.5";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementsByTagName("body")[0].style.opacity = "1";
}

这样您就可以定位所选的第一个对象。现在，我不认为你想这样做。你可能需要在右侧有一个main div并改变它的不透明度。这样你就可以伪造一个模态。

希望这会有所帮助：）

Answer 3

document.getElementsByTagName("body")返回一个数组，你必须选择它的第一个索引。

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.getElementsByTagName("body")[0].style.opacity = "0.5";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementsByTagName("body")[0].style.opacity = "1";
}

https://codepen.io/anon/pen/XqdEBM

Answer 4

您不应该使用正文标记作为背景，而是使用div代替：

HTML

public class MyTest {
    @org.junit.Test
    public void testOne() {}

    @org.junit.Test
    public void testTwo() {}
}

CSS

<div id="testDiv">
...
</div>
<div id="backdrop"></div>

JS

.sidenav {
    ...
    z-index: 2;
}
...
#backdrop {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 1;
  transition: opacity 0.4s;
  background: black;
  opacity: 0;
}

更改背景不透明度onclick

4 个答案: