使用 jQuery 制作可切换的导航栏答案

【问题标题】：Making a toggle-able navigation bar with jQuery使用 jQuery 制作可切换的导航栏
【发布时间】：2019-12-24 13:32:37
【问题描述】：

使用来自here 的最佳答案制作了一个导航栏，当您单击徽标图像时会出现该导航栏，当您单击徽标图像以外的位置时会消失。它只是部分起作用。这里有两个主要问题：

加载页面时默认显示导航栏。我希望它默认隐藏。
当我在 div 外部单击时导航栏消失，但不会重新出现。

HTML：

<img src="logo2.jpg" id="showdivblock" /> <!-- this is the logo that should toggle the nav bar -->
<div class="sidenav" id="divblock">
   <a href="about.php">About</a>
   <a href="collections.php">Collections</a>
   <a href="custom.php">Custom Orders</a>
   <a href="contactus.php">Contact Us</a>
</div>

CSS：

#divblock {
   position: absolute;
}

#divblock:after {
  content:"";
  position: absolute;
  display: block;
  width:0;
  height:0;
}

还有 jQuery：

$('#divblock').hide();
$('#showdivblock').click(function(e){
    e.stopPropagation();
    $('#divblock').slideToggle();
});
$('#divblock').click(function(e){
    e.stopPropagation();
});
$(document).click(function(){
     $('#divblock').slideUp();
});

在标签中使用此代码链接到我的 HTML/CSS 文件：

<script type="text/javascript" src="navbar.js"></script>

【问题讨论】：

澄清：在 HTML 文件的 head 标签内。
对我来说很好jsfiddle.net/mohamedyousef1980/myko1xe2/2

标签： jquery html css navbar

【解决方案1】：

这可能是由于脚本在加载时和加载 dom 之前立即运行。所以此时不存在#divblock 或#showdiv 元素来接收点击事件。

你可以使用 jQuery 的文档准备...

$(document).ready(function(){
  // place code referring to dom elements here
});

或者将你的脚本放在底部，就在你的</body> 标签内。

或者使用 jQuery 的 on() 将委托的负担放在现有元素上...

$(document).on('click','#showdivblock',function(){
  // place code referring to dom elements here      
});

您的最后一行有效（使您的块隐藏）的原因是 $(document) 在那个时刻确实存在并且可以分配一个点击事件。

【讨论】：

【解决方案2】：

您可以使用此脚本来显示和隐藏菜单，并在 div 外部单击以隐藏菜单。

/*Hide menu by default*/
$( document ).ready(function() {
   $("#divblock").hide();
});

$(document).on("click", function () {
  $("#divblock").slideToggle();
});

/*When menu button is clicked, toggle the menu*/
$("#showdivblock").click(function(event){
 event.stopPropagation();
 $("#divblock").slideToggle();
});

【讨论】：