滑动面板菜单后退按钮不起作用

Question

我正在尝试编写幻灯片导航。我的后退按钮不起作用。在这里，我将我的工作文件包含在js-fiddle中。还请注意＆＃34;关于＆＃34;页面有子元素。

Click to get fiddle

Please help me to come back on its previous stage, when click on the "Close" button.

Answer 1

试试这个......

$(".back").on('click', function(){
    $(".main-navigation").removeClass("open-panel");
});

Answer 2

这是您所需输出的内容

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".main-navigation ul").prepend("<li class='back'><a href='#' title='Close'>close</a></li>");
  $(".menu-trigger").click(function() {
    $(".main-navigation").addClass("open-panel");
  });
  $(".main-navigation li").click(function() {
    $(".main-navigation li ul").addClass("open-panel");
  });
  $(".main-navigation li").has("ul").addClass("sub-child");
  $(".back").on('click', function() {
    $("#mainNav").removeClass().addClass('main-navigation');
    $("#mainNav ul li ul").removeClass();
  });
});

＆＃13;

.top-header {
  background-color: #3173d0;
  color: #fff;
  font-size: 1rem;
  min-height: 40px;
  padding-top: 8px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}

.top-header .menu-trigger {
  background-color: #103669;
  color: #fff;
  height: 40px;
  left: 0;
  position: absolute;
  ;
  text-align: center;
  top: 0;
  width: 40px;
}


/* Mobile Sliding Panel Section */

.main-navigation {
  background-color: #103669;
  color: #fff;
  left: -100%;
  min-height: 100%;
  position: absolute;
  text-transform: capitalize;
  top: 0;
  z-index: 2;
}

.main-navigation:after,
.main-navigation:before {
  content: '';
  display: table;
}

.main-navigation:after {
  clear: both;
}

.main-navigation ul {
  background-color: #103669;
  display: block;
  left: 0;
  min-height: 100%;
  position: absolute;
  top: 0;
  width: 220px;
}

.main-navigation ul ul {
  left: -100%;
}

.open-panel {
  left: 0 !important;
  transition: all ease 0.4s;
  -o-transition: all ease 0.4s;
  -webkit-transition: all ease 0.4s;
}

.back {
  position: relative;
}

.close-panel {
  left: -100%;
}

.main-navigation ul {
  display: block;
}

.main-navigation ul li {
  border-bottom: #2258a4 solid 1px;
  display: block;
}

.main-navigation a {
  color: #fff;
  display: block;
  font-size: 0.8125rem;
  padding: 10px 15px;
  text-align: left;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
html {
  font-size: 16px;
}

body {
  background-color: #fff;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 0.875rem;
}

a {
  color: #4b4b4b;
  text-transform: capitalize;
}

a:hover,
a:focus {
  outline: none;
  text-decoration: none;
}

ul:after,
ul:before,
li:after,
li:before {
  content: '';
  display: table;
}

ul:after,
li:after {
  clear: both;
}

ul,
li,
h1,
h2 {
  margin: 0;
  padding: 0;
}

button,
input[type=submit],
input[type=reset] {
  border: none;
  cursor: pointer;
}

＆＃13;

<section class="top-header">
  sliding panel demo
  <button class="menu-trigger"><i class="fa fa-bars"></i></button>
  <nav class="main-navigation" id="mainNav">
    <ul>
      <li><a href="#" title="Home">home</a></li>
      <li><a href="#" title="About">about us</a>
        <ul>
          <li><a href="#">company</a></li>
          <li><a href="#">vision</a></li>
          <li><a href="#">mission</a></li>
        </ul>
      </li>
      <li><a href="#" title="Services">services</a></li>
      <li><a href="#" title="Portfolio">portfolio</a></li>
      <li><a href="#" title="Contact">contact us</a></li>
    </ul>
  </nav>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

问题是你在这里添加了$(".main-navigation li").click()类，你在$(".back")删除了它，所以当你关闭子菜单并重新打开它时它会执行这两个输出错误输出。它......我建议50％解决方案：）