FadeToggle/SlideToggle只能使用一次

我正尝试创建一个导航抽屉，当点击时淡出/淡入。在jQuery代码中，我将导航隐藏起来，当我点击汉堡图标时，它会淡入。但是，当我再次点击它时，它不会淡出。FadeToggle/SlideToggle只能使用一次

我以前有类似的问题，'点击'功能（因为事件发生只有第一次被点击），我仍然无法弄清楚。帮助将不胜感激！

$(document).ready(function() { 
 
    $('#topnav ul').hide() 
 
    $('#burger').click(function() { 
 
    $('#topnav ul').fadeToggle(300); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header id="title"> 
 
    <input type="checkbox" id="checkboxfornav"> 
 

 
    <nav id="topnav"> 
 
    <label id="burger" for="checkboxfornav"> 
 
     <div id="topline"></div> 
 
     <div id="midline"></div> 
 
     <div id="botline"></div> 
 
    </label> 
 

 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a class="works" href="#">Works</a></li> 
 
     <li><a class="news" href="#">News</a></li> 
 
     <li><a href="#">Shop</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

来源

2016-11-14 Levin

首先'＃burger'元素没有内容，所以没有什么会出现点击。如果添加内容，那么'ul'会在每次连续点击时淡入淡出 - 这是预期的行为。你说你想'ul'淡出，但是它应该在什么时候这样做呢？ –

如果您点击**标签**，我可以编辑您的帖子并为标签的文本添加**汉堡** –

https://jsfiddle.net/yvg6kn7t/ – Levin

首先，事件监听器是不是在checkbox，当你把它放在checkbox的fadeToggle作品。

$(document).ready(function() { 
 
    $('#topnav ul').hide() 
 
    $('#checkboxfornav').change(function() { 
 
     $('#topnav ul').fadeToggle($(this).is(":checked")); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header id="title"> 
 
    <input type="checkbox" id="checkboxfornav"> 
 

 
    <nav id="topnav"> 
 
    <label id="burger" for="checkboxfornav"> 
 
     <div id="topline"></div> 
 
     <div id="midline"></div> 
 
     <div id="botline"></div> 
 
    </label> 
 

 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a class="works" href="#">Works</a></li> 
 
     <li><a class="news" href="#">News</a></li> 
 
     <li><a href="#">Shop</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

来源

2016-11-14 08:34:37 Alexis

@RoryMcCrossan是的，同意你的意见。已完成更改。 – Alexis

所有的答案都是有帮助的！这是我自己的错误哈哈。当导航淡入时，它覆盖了我的#burger（导航并非完全不透明）。在使用z-index后，我设法解决了这个问题。非常感谢！

来源

2016-11-14 09:02:43 Levin

FadeToggle/SlideToggle只能使用一次

回答

相关问题