javascript - 无法在此 Div 之外调用函数

Question

我尝试了很多方法来使这段代码正常工作，但每次都失败了。我知道这很容易，但我不能落后......

如果我单击 3 条条纹，它们将转换为 X - 效果很好......但如果我想单击菜单文本 - 3 条条纹不会转换。

这是工作代码 HTML、CSS 和 JS

function openCloseMenu(x) {
  x.classList.toggle("change");
  $('.navigation-menu').toggleClass('hidden');
}

.menu-container {
  display: inline-block;
  cursor: pointer;
  white-space: nowrap;
  float: right;
}

.menu-block {
  display: inline;
  white-space: nowrap;
  width: auto;
}

.menu-block p {
  font: 1.55em "Amatic Regular";
  font-weight: bold;
  float: right;
  margin: 0;
  color: #53b1c2;
  padding-right: 0.3em;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  background-color: #2ba4b8;
  opacity: 0.8;
  margin: 6px 0;
  transition: 0.4s;
  border-radius: 50px;
}

.bar1 {
  width: 1em;
  height: 5px;
}

.bar2 {
  width: 1.5em;
  height: 5px;
}

.bar3 {
  width: 2em;
  height: 5px;
}


/* Rotate first bar */

.change .bar1 {
  width: 2em;
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

<span class="menu-block">
    <div class="menu-container" onclick="openCloseMenu(this);">
    <div class="bar1"></div>
    <div class="bar2"></div>``
    <div class="bar3"></div>
    </div>
    <p class="hidden-xs" onclick="openCloseMenu(this);">MENÜ</p>
    </span>

Answer 1

这是因为，在您的函数中，您将 this 作为参数 (this) 发送，并且在菜单中 this 引用菜单本身，所以它不会工作，

删除参数，如下面的代码片段所示:

function openCloseMenu() {
  $(".menu-container").toggleClass("change");
  $('.navigation-menu').toggleClass('hidden');
}

.menu-container {
  display: inline-block;
  cursor: pointer;
  white-space: nowrap;
  float: right;
}

.menu-block {
  display: inline;
  white-space: nowrap;
  width: auto;
}

.menu-block p {
  font: 1.55em "Amatic Regular";
  font-weight: bold;
  float: right;
  margin: 0;
  color: #53b1c2;
  padding-right: 0.3em;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  background-color: #2ba4b8;
  opacity: 0.8;
  margin: 6px 0;
  transition: 0.4s;
  border-radius: 50px;
}

.bar1 {
  width: 1em;
  height: 5px;
}

.bar2 {
  width: 1.5em;
  height: 5px;
}

.bar3 {
  width: 2em;
  height: 5px;
}


/* Rotate first bar */

.change .bar1 {
  width: 2em;
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="menu-block">
    <div class="menu-container" onclick="openCloseMenu();">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    </div>
    <p class="hidden-xs" onclick="openCloseMenu();">MENÜ</p>
</span>