php - JQuery 隐藏/可见错误

Question

我是 Jquery 的新手。我想在我的网站上制作 float 菜单。我创建了 id="item"

的 div

下面的代码在我的 .php 文件中，我也想在按下我的按钮 id='sidebarOpenfile' 后激活元素。

<div id="item" style="float:left">
<?php include("leftmenu.php"); ?>
</div> 

我的“sidebarOpenFile”代码在这里

  <button id="sidebarOpenfile" class="toolbarButton" title="Toggle OpenFile" tabindex="5" data-l10n-id="toggle_sidebar_openfile">
              <span data-l10n-id="toggle_openfile_label">Toggle OpenFile</span>
            </button>

我的 .php 文件还有 viewer.js 文件和 .css 文件。

我用这段代码编写了我的 .js 文件

document.getElementById('sidebarOpenfile').addEventListener('click',function() {
    alert("Its working"); // For sure whether event is working or not working,
 This code works and gets alert

$("#item").css('visibility','visible');
});

我还写了我的 .css 文件这个代码

#item {
    position:absolute;
    top: 10px;
    width: 200px;
    bottom: 0px;
    background:orange;
    left:0px;
    visibility:hidden;
}

通常，按下按钮后，它会将元素的 css 可见性从隐藏更改为可见。但它似乎不起作用并且没有效果。

如有任何帮助，我将不胜感激。

Answer 1

点击切换可见性非常简单。你不需要任何纯 javascript，只需要一个(非常)小的 jQuery:

<script>
  $('#sidebarOpenFile').click(function() {
  $('#item').toggle(); });
</script>

toggle() 函数切换查询的#item 的显示状态。

要仅隐藏或仅显示您可以使用:

 $('#sidebarOpenFile').click(function() {
   $('#item').show(); // or $('this').hide()
}

为了约定，它应该被包裹在一个自调用的匿名函数中，例如:

(function(){
  $('#sidebarOpenFile').click(function() {
  $('#item').toggle(); });
})();