javascript - 切换关闭时显示的图标 javascript

Question

我正在创建一个 Canvas 外菜单。我正在尝试获取它，以便当关闭切换生效时它只会显示菜单图标。

我在尝试解决这个问题时遇到了一些麻烦，因此只能在关闭 Canvas 时看到图标，而在打开 Canvas 时才能看到整个链接。

似乎也无法将标题定位在侧栏顶部(侧栏位于下方)，只能将标题放在侧面。

实例:http://codepen.io/riwakawebsitedesigns/pen/oxwzt

代码

<div class="wrapper">

<div class="offcanvas-header">
        <i class="fa fa-dedent fa-lg toggle"></i>
</div>

<nav class="offcanvas">
    <ul>
        <li><a href="#"><i class="fa fa-dedent fa-lg"></i> Home</a></li>
        <li><a href="#"><i class="fa fa-dedent fa-lg"></i> About</a></li>
        <li><a href="#"><i class="fa fa-dedent fa-lg"></i> Portfolio</a></li>
        <li><a href="#"><i class="fa fa-dedent fa-lg"></i> Contact me</a></li>
    </ul>
</nav>

<div id="page-wrapper">
<main>
</main>
</div>

</div>

<script type="text/javascript">
$(function() {
  var wrapper = $(".wrapper"),
      toggle = $(".toggle"),
      nav = $(".offcanvas");
  toggle.on("click", function() {
    wrapper.toggleClass("nav-open");
    // Change the font-awesome icons on click.
    toggle.toggleClass("fa fa-dedent fa-lg");
    toggle.toggleClass("fa fa-dedent fa-lg");
  });


     $(window).on("click", function(e) {
        if (
          wrapper.hasClass("nav-open") && 
          !$(e.target).parents(nav).hasClass("offcanvas") && 
          !$(e.target).hasClass("toggle")
        ) {
            wrapper.removeClass("nav-open");
          }
      });

});
</script>

CSS

/* Reset */

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0 !important;
    margin: 0 !important;
}


body {
    margin: 0;
    padding: 0;
}

.wrapper {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.offcanvas-header {
    background: none repeat scroll 0 0 #ffffff;
   border-bottom: 1px solid #e5e5e5;
   margin: 0;
   padding: 0;
   height: 50px;
}

.offcanvas-header i {
    line-height: 50px;
    color: #6D6D6D;
    font-weight: bold;
    padding-left: 20px;
    font-size: 2rem;
}

.toggle {
    color: #eee;
    cursor: pointer;
    position: relative;
    top: 0px;
    left: 0px;
}

.offcanvas {
    background-color: #515151;
    border-right: 1px solid #515151;
    height: 100%;
   padding-top: 50px;
    transition: all 0.3s ease 0s;
    color: #fff;
    position: fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;
}

.offcanvas ul {
    margin: 0;
    padding: 0;
}

.offcanvas ul li {
    list-style: none;
    position:relative;
    margin: 0;
    padding: 0;
}

.offcanvas ul li a {
    display: block;
    position:relative;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #585858;
   color: #c4c4c4;
   font-size: 14px;
   padding-left: 0;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.offcanvas ul li a i {
    padding-right: 10px;
    font-size: 14px;
}

.offcanvas ul li a:hover {
    color: white;
    font-weight: bold;
}

.nav-open {
    left: 231px;
}

.nav-open .offcanvas {
  left: 0;
}

.wrapper, .offcanvas {
    -webkit-transition: left .2s ease;
    transition: left .2s ease;
}

Answer 1

您可以将图标 float 到右侧。并在导航打开时将其删除。

a .fa {
  float: right;
}

.nav-open a .fa {
  float: none;
}

Codepen Demo