無法調用此功能之外的功能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'); 
}