嗨，我想通过单击菜单从汉堡更改为交叉答案

【问题标题】：Hi i want to change from hamburgur to cross on click of the menu嗨，我想通过单击菜单从汉堡更改为交叉
【发布时间】：2021-01-21 13:33:36
【问题描述】：

您好，我正在开发 Shopify 网站。我希望汉堡菜单在点击时更改为交叉，我已经尝试了所有方法，但它不起作用。我有两个不同的图像，一个是汉堡包，另一个是交叉的。我也给了他们两个不同的课程

网站网址：“https://9q49gu54zvkaspm1-18691129395.shopifypreview.com/”

请帮忙

if($('body').hasClass(".show-mobile-nav"))
{
  $('img.close').hide();
} 
else($('body').hasClass(""))
{
  $("img.open").show();
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

这是我尝试过的代码

【问题讨论】：

你应该把你的html也添加到sn-p
cdn.shopify.com/s/files/1/0186/9112/9395/files/…"> cdn.shopify.com/s/files/1/0186/9112/9395/files/…">
菜单
这里不是点击编辑按钮->sn-p下方是编辑sn-p的按钮->在html区插入你的html

标签： javascript java jquery css

【解决方案1】：

你可以尝试做这样的事情。只要有一个跨度，你就可以用::before 和::after 制作另外两个小节

Here is a codepen

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Quicksand", sans-serif;
}

ul,
ol {
  list-style-type: none;
}

a {
  color: black;
  text-decoration: none;
}

nav {
  color: white;
  background: #393e46;
  position: fixed;
  width: 100%;
  z-index: 999;
}
nav h3 {
  display: inline-block;
  margin: 0.5em;
}

.mobile-nav {
  width: 100%;
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  background-color: #393e46;
  padding: 1em;
  text-align: right;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}
.mobile-nav a {
  color: white;
  padding: 0.25em;
  font-size: larger;
  opacity: 0;
  transition: opacity 150ms ease-in;
}

.mobile-nav-toggle {
  position: absolute !important;
  top: -99999px !important;
  right: -999999px !important;
}

.mobile-nav-toggle-label {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 99999;
}

.mobile-nav-toggle:focus ~ .mobile-nav-toggle-label {
  outline: 3px solid rgba(0, 172, 181, 0.75);
}

.mobile-nav-toggle-label span,
.mobile-nav-toggle-label span::before,
.mobile-nav-toggle-label span::after {
  width: 100%;
  display: block;
  background: white;
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
  transition: transform 400ms ease-in-out;
}

.mobile-nav-toggle-label span::before,
.mobile-nav-toggle-label span::after {
  content: "";
  position: absolute;
}

.mobile-nav-toggle-label span::before {
  bottom: 7px;
  transition: opacity 250ms ease-in-out 400ms;
}

.mobile-nav-toggle-label span::after {
  top: 7px;
}

.mobile-nav-toggle:checked ~ .mobile-nav {
  transform: scale(1, 1);
}

.mobile-nav-toggle:checked ~ .mobile-nav a {
  opacity: 1;
  transition: opacity 150ms ease-in 350ms;
}

.mobile-nav-toggle:checked ~ .mobile-nav-toggle-label span:before {
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}

.mobile-nav-toggle:checked ~ .mobile-nav-toggle-label span {
  transform: rotate(45deg);
}

.mobile-nav-toggle:checked ~ .mobile-nav-toggle-label span:after {
  transform: rotate(-90deg) translateX(7px);
}

<nav>
  <h3 class="logo">Logo Here</h3>
  <input type='checkbox' id='mobile-nav-toggle' class='mobile-nav-toggle'>
  <label for='mobile-nav-toggle' class='mobile-nav-toggle-label'><span></span></label>
  
  
  <div class="mobile-nav">
  <a href="javascript:void(0)" class="mobile-nav-link">Home</a>
  <a href="javascript:void(0)" class="mobile-nav-link">Features</a>
  <a href="javascript:void(0)" class="mobile-nav-link">Pricing</a>
  <a href="javascript:void(0)" class="mobile-nav-link">Resourses</a>
  <a href="javascript:void(0)" class="mobile-nav-link">Contact</a>
</div>
</nav>

【讨论】：

【解决方案2】：

这应该可行：

if($('body').hasClass(".show-mobile-nav"))
{
  $('img.close').show();
  $("img.open").hide(); // remember to hide or show the other element as-well
} 
else($('body').hasClass(""))
{
  $('img.close').hide();
  $("img.open").show(); 
}

当然，它应该是一个 in 函数，在页面加载时以及用户单击所述按钮时调用它。

【讨论】：