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

您可以了解自己的代码：

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');
 }

Answer 2

这是Beacause，在您的函数中，您将其作为参数发送（此），并在菜单this中引用菜单本身，因此，它不会工作，

删除param，如下面的代码段所示：

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

无法调用此Div之外的功能

2 个答案: