无法调用此功能之外的功能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指的是菜单本身的话，它不会工作，

删除PARAM作为在波纹管片段所示：

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>

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