jquery - 使用 jQuery 制作可切换的导航栏

Question

使用了 here 中的最佳答案使导航栏在您单击 Logo 图像时出现，并在您单击不在 Logo 图像上的某个位置时消失。它仅部分起作用。这里有两个主要问题:

1. 页面加载时默认显示导航栏。我希望它默认隐藏。
2. 当我在 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>

Answer 1

这可能是因为脚本在加载时和加载 dom 之前立即运行。所以不会有#divblock或 #showdiv存在的元素以接收当时的点击事件。

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

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

或者把你的脚本放在底部，就在你的</body>里面标签。

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

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

你的最后一行起作用(使你的 block 隐藏)的原因是 $(document)在那一刻确实存在并且可以分配一个点击事件。