滑入菜单需要切换汉堡包选项

Question

function openNav() {
  document.getElementById("mySidenav").style.width = "50%";
  document.getElementById("mySidenav2").style.width = "50%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("mySidenav2").style.width = "0";
}

<style>body {
  font-family: "Lato", sans-serif;
}

.leftSidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.leftSidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.leftSidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}

.leftSidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .leftSidenav {
    padding-top: 15px;
  }
  .leftSidenav a {
    font-size: 18px;
  }
}

.rightSidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.rightSidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.rightSidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}

.rightSidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .rightSidenav {
    padding-top: 15px;
  }
  .leftSidenav a {
    font-size: 18px;
  }
}

</style>

<div id="mySidenav" class="leftSidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="mySidenav2" class="rightSidenav">
  <a href="#">About 2</a>
  <a href="#">Services 2</a>
  <a href="#">Clients 2</a>
  <a href="#">Contact 2</a>
</div>

<h2>Would like toggle switch</h2>
<p>As of now open and close are 2 different icons</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

我的菜单中有一张幻灯片，由我的汉堡图标激活。无论屏幕大小如何，我都只使用汉堡包图标。截至目前，我的代码使用汉堡包图标在左右菜单中滑动。有一个单独的关闭图标来关闭菜单。我想使用汉堡包图标来打开和关闭我的菜单，如果可能的话，当菜单打开时，汉堡包图标会变为X.

我试图通过自己来做这件事我无法做到。

感谢您的帮助。

Answer 1

You can use your opening-switch to toggle a state-class. You have a lot of duplicated styles that can be combined to one class. To reuse your toggle-switch, you can make it fixed. That allows you to animate it on a state change to the center of the screen.

StringBuilder

 public void Test3()
        {
            Console.WriteLine(GenerateFullTypeName("SomeType", 3));
        }

        // Constructs a name like "SomeType<T1, T2, T3>"  
        public string GenerateFullTypeName(string name, int arity)
        {
            //StringBuilder sb = new StringBuilder();
            StringBuilder sb = AcquireBuilder();

            sb.Append(name);
            if (arity != 0)
            {
                sb.Append("<");
                for (int i = 1; i < arity; i++)
                {
                    sb.Append("T"); sb.Append(i.ToString()); sb.Append(", ");
                }
                sb.Append("T"); sb.Append(arity.ToString()); sb.Append(">");
            }

            //return sb.ToString();
            /* Use sb as before */
            return GetStringAndReleaseBuilder(sb);
        }
        [ThreadStatic]
        private static StringBuilder cachedStringBuilder;

        private static StringBuilder AcquireBuilder()
        {
            StringBuilder result = cachedStringBuilder;
            if (result == null)
            {
                return new StringBuilder();
            }
            result.Clear();
            cachedStringBuilder = null;
            return result;
        }

        private static string GetStringAndReleaseBuilder(StringBuilder sb)
        {
            string result = sb.ToString();
            cachedStringBuilder = sb;
            return result;
        }

 private static StringBuilder AcquireBuilder()
        {
            StringBuilder result = cachedStringBuilder;
            if (result == null)
            {
                //unlike the method above, assign it to the cache
                cachedStringBuilder = result = new StringBuilder();
                return result;
            }
            result.Clear();
            //no need to null it
           // cachedStringBuilder = null;
            return result;
        }

        private static string GetStringAndReleaseBuilder(StringBuilder sb)
        {
            string result = sb.ToString();
             //other method does not to assign it again.
            //cachedStringBuilder = sb;
            return result;
        }

I wrapped the lines inside a span, so when the class function toggleNav() { (document.body || document.documentElement).classList.toggle( 'nav-is-open' ); } is present we'd be able to just hide the span and add another symbol with CSS.