我正在尝试编写幻灯片导航。我的后退按钮不起作用。在这里,我将我的工作文件包含在js-fiddle中。还请注意"关于"页面有子元素。
Please help me to come back on its previous stage, when click on the "Close" button.
答案 0 :(得分:0)
试试这个......
$(".back").on('click', function(){
$(".main-navigation").removeClass("open-panel");
});
答案 1 :(得分:0)
这是您所需输出的内容
$(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;
问题是你在这里添加了$(".main-navigation li").click()
类,你在$(".back")
删除了它,所以当你关闭子菜单并重新打开它时它会执行这两个输出错误输出。它......我建议50%解决方案:)