jquery - 为什么我不能让我的侧边导航栏出现和消失

标签 jquery html css

请原谅我，但我会在此处粘贴我的所有代码，以便有人可以发现错误。在过去的几天里，我已经尝试过了，但没有成功。只希望我的导航栏在点击时出现和消失。就是这样，提前致谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nav Bar</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
     @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
    </style>
</head>
<body>   
    <nav class="menu">
    <header>Menu <span>×</span></header>
    <ol>
        <li class="menu-item"><a href="#0">Home</a></li>
        <li class="menu-item"><a href="#0">About</a></li>
        <li class="menu-item">
            <a href="#0">Widgets</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Grocerry</a></li>
                <li class="menu-item"><a href="#0">Discount</a></li>
                <li class="menu-item"><a href="#0">Huge Sale</a></li>
            </ol>
        </li>
        <li class="menu-item">
            <a href="#0">Juice</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Russi</a></li>
                <li class="menu-item"><a href="#0">Paneer Pyaza</a></li>
                <li class="menu-item"><a href="#0">Rasbhari</a></li>
            </ol>
        </li>
        <li class="menu-item"><a href="#0">Contact</a></li>
    </ol>
    <footer><button aria-label="Toggle Menu">Toggle</button></footer>
</nav> 
<script src="js/jquery-3.4.1.min.js"></script>
<script>

   var $els = $('.menu a, .menu header');
var count = $els.length;
var grouplength = Math.ceil(count/3);
var groupNumber = 0;
var i = 1;
$('.menu').css('--count',count+'');
$els.each(function(j){
    if ( i > grouplength ) {
        groupNumber++;
        i=1;
    }
    $(this).attr('data-group',groupNumber);
    i++;
});

$('.menu footer button').on('click',function(e){
    e.preventDefault();
    $els.each(function(j){
        $(this).css('--top',$(this)[0].getBoundingClientRect().top + ($(this).attr('data-group') * -15) - 20);
        $(this).css('--delay-in',j*.1+'s');
        $(this).css('--delay-out',(count-j)*.1+'s');
    });
    $('.menu').toggleClass('closed');
    e.stopPropagation();
});

// run animation once at beginning for demo
setTimeout(function(){
    $('.menu footer button').click();
    setTimeout(function(){
        $('.menu footer button').click();
    }, (count * 100) + 500 );
}, 1000);    
</script>
</body>
</html>


* {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    color: #333;
    font-size: 100%;
    line-height: 1.5;
  }
  body {
    margin: 0;
    background-size: cover;
  }
  nav {
    --duration: .5s;
    --easing: ease-in-out;
    position: relative;
    width: 220px;
    margin: 20px;
  }
  nav ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  nav li {
    margin: -4px 0 0 0;
  }
  nav a {
    display: block;
    text-decoration: none;
    background: #fff;
    transform-origin: 0 0;
    transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
    transition-delay: var(--delay-out);
    border-radius: 4px;
    padding: 1em 1.52em;
  }
  nav a:hover {
    background: #efefef;
  }
  nav .sub-menu a {
    font-size: .9em;
    color: #666666;
    border-left: 2em solid white;
    padding: .75em;
    background: linear-gradient(to right, #dddddd 2px, #ffffff 2px);
  }
  nav .sub-menu a:hover {
    background: linear-gradient(to right, #dddddd 2px, #efefef 2px);
  }
  nav header {
    font-weight: 600;
    display: block;
    background: rgba(255, 255, 255, 0.5);
    transform-origin: 0 0;
    transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
    transition-delay: var(--delay-out);
    border-radius: 4px;
    padding: 1em 1.52em;
  }
  nav header span {
    border: none;
    background: transparent;
    font-size: 1.5em;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    float: right;
  }
  nav footer button {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    padding: calc(1em - 2px);
    width: 100%;
    transform-origin: 0 0;
    transition: transform var(--duration) var(--easing);
    transition-delay: calc(var(--duration) + (.1s * (var(--count) / 2)));
    cursor: pointer;
    outline: none;
    background: #cdcdcd;
    opacity: 0;
  }
  nav.closed a,
  nav.closed header {
    transform: translateY(calc(var(--top) * -1)) scaleY(0.1) scaleX(0.2);
    transition-delay: var(--delay-in);
    color: transparent;
  }
  nav.closed footer button {
    transition-delay: 0s;
    transform: scaleY(0.7) scaleX(0.2);
  }

如有任何帮助，我们将不胜感激。我希望我的侧边导航栏在点击时出现和消失。

最佳答案

好的，试试下面的代码来添加淡入淡出的效果。在这里，我使用了 fadetoggle() 而不是 toggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nav Bar</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".toggle").click(function(){
    $(".nav").fadeToggle(1000);
	
  });
    
});
</script>
<style>
* {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    color: #333;
    font-size: 100%;
    line-height: 1.5;
  }
  body {
    margin: 0;
    background-size: cover;
  }
 nav {
  /*   --duration: .5s;
    --easing: ease-in-out;*/
    position: relative;
    width: 220px;
    margin: 20px;
  }
  nav ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  nav li {
    margin: -4px 0 0 0;
  }
  nav a {
    display: block;
    text-decoration: none;
    background: #fff;
    transform-origin: 0 0;
  /* transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
    transition-delay: var(--delay-out);*/
    border-radius: 4px;
    padding: 1em 1.52em;
  }
  nav a:hover {
    background: #efefef;
  }
  nav .sub-menu a {
    font-size: .9em;
    color: #666666;
    border-left: 2em solid white;
    padding: .75em;
    background: linear-gradient(to right, #dddddd 2px, #ffffff 2px);
  }
  nav .sub-menu a:hover {
    background: linear-gradient(to right, #dddddd 2px, #efefef 2px);
  }
 h1.toggle {
    display: inline-block;
    margin: 20px 0px 0px 20px;
    padding: 20px;
    border: 0px solid #e8e8e8;
    border-radius: 2px;
    width:15.5%
}

h1.toggle:hover {
    background: #e8e8e8;
}

h1 span {
    float: right;
    font-size: 27px;
    display: inline-block;
    position: relative;
    top: -9px;
}

</style>
	</head>
<body>   
<h1 class="toggle">Menu <span>×</span></h1>
    <nav class="nav">
	
    <ol>
        <li class="menu-item"><a href="#0">Home</a></li>
        <li class="menu-item"><a href="#0">About</a></li>
        <li class="menu-item">
            <a href="#0">Widgets</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Grocerry</a></li>
                <li class="menu-item"><a href="#0">Discount</a></li>
                <li class="menu-item"><a href="#0">Huge Sale</a></li>
            </ol>
        </li>
        <li class="menu-item">
            <a href="#0">Juice</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Russi</a></li>
                <li class="menu-item"><a href="#0">Paneer Pyaza</a></li>
                <li class="menu-item"><a href="#0">Rasbhari</a></li>
            </ol>
        </li>
        <li class="menu-item"><a href="#0">Contact</a></li>
    </ol>
	</body>
</html>

关于jquery - 为什么我不能让我的侧边导航栏出现和消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58036302/

上一篇：javascript - 为什么放大和缩小功能在使用 jquery 的 firefox 中不能正常工作？

下一篇：html - 如何修复因鼠标悬停而导致宽度变化的周围 div 的 div 偏移？

相关文章：

javascript - jquery中的Json对象无法读取？

javascript - 此 jQuery 代码无法正常工作的新手问题

javascript - 页面加载时模式不会自动出现

javascript - 选择特定单选框时使用 jquery 禁用循环中的文本框

jquery - 响应式设计 : How to expand vertically list item (twitter ticker)?

html - css 选择器查询

css - 在 Chrome 中打印会更改我的页面布局

html - Jquery Mobile ListView 选定项 CSS 颜色

css - 仅通过 CSS 更改悬停内容

html - API请求中照片的具体高度和宽度

©2024 IT工具网  联系我们