不能在这个 Div 之外调用函数答案

【问题标题】：Can't call function outside of this Div不能在这个 Div 之外调用函数
【发布时间】：2017-06-01 02:22:50
【问题描述】：

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

如果我单击 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>

【问题讨论】：

您有一行代码使用标准 DOM 切换类，另一行使用 JQuery 进行切换。这很奇怪，但我没有看到你甚至引用了 JQuery。你做到了吗？
@ScottMarcus 可能是因为 jquery 的方法也适用于项目集合，但标准 DOM 方法适用于一个元素，或者 OP 仍在学习；）
您没有一个名为hidden 的类，所以这对您的toggleClass 代码来说是个问题。
@niceman 我知道，但是一个 JQuery 对象在它的集合中只能保存一个项目，所以使用这两个版本没有意义。我们需要知道 OP 的意图，而不是猜测。
感谢所有答案！是的，我还在学习——也是我第一次尝试创建一个函数:)

标签： javascript jquery html css css-transitions

【解决方案1】：

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

删除参数如下所示 sn-p ：

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>

【讨论】：

不客气 :)

【解决方案2】：

你可能理解自己的代码：

function openCloseMenu(element) {

一个带有参数的函数元素（x并不是一个好名字）

element.classList.toggle("change");

然后切换此特定元素的更改。所以：

<p class="hidden-xs" onclick="openCloseMenu(this);">MENÜ</p>

这将触发菜单名称的更改。这是我们不想要的。

我们想改变这个元素：

<div id="menu-icon" class="menu-container" onclick="openCloseMenu();">

我已经为它分配了一个 ID。所以我们可以这样得到：

$("#menu-icon")

完整代码：

function openCloseMenu() {//no param needed here
        $("#menu-icon").toggleClass("change");
        $('.navigation-menu').toggleClass('hidden');
 }

此答案使用http://jQuery.org。没有 Jquery：

function openCloseMenu() {//no param needed here
        document.getElementById("menu-icon").classList.toggle("change");
        document.getElementsByClassName('navigation-menu')[0].classList.toggle('hidden');
 }

【讨论】：