Question

我是Jquery的新手。我想在我的网站上制作浮动菜单。我创建了div，即id =“item”

下面的代码在我的.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(); });
})();

Answer 2

好的......我会咬人......第一个问题是：

document.getElementById('sidebarOpenfile').addEventListener()

对于初学者来说，JQuery更容易用$（'＃sidebarOpenfile'）来引用它...但是我遇到的真正问题是我无法在其余的任何地方找到'sidebarOpenfile'你的代码;你似乎试图影响的div的id是'item'，而不是'sidebarOpenfile'。

这可能是你的问题。

另一种可能性是你实际上在php代码中有正确的id，你没有显示它。

<强>更新

好的......我的不好，睡眠不够......你很紧，身份在那里，并且在正确的地方。

$('#sidebarOpenfile').click(function(){$("#item").css('visibility','visible')});

此应工作...但只显示元素。

如果您希望切换，则必须添加一些额外内容：

$('#sidebarOpenfile').click(function()  
{
    if ($('#item').css('visibility')=='hidden')
    {
        $('#item').css('visibility', 'visible');
    } 
    else 
    {
        $('#item').css('visibility', 'hidden');
    }
 });

Answer 3

你可以使用类似的东西：

$('#item').fadeToggle("fast", "linear"); //this will toggle the visibility back and forth and do it gradually

或

 $('#item').removeAttr('visibility');  //this will simply remove the visibility attribute thus making it visible by default

Answer 4

试试这个：

$('#item').on('click', function(e){
    $(this).css('display','none');
});

Answer 5

您可以使用这个简单的jQuery脚本切换元素的visibility属性：

$(document).ready(function () {
    var item = $('#item');
    $('#sidebarOpenfile').click(function() {
        if (item.css('visibility') == 'visible') {
            item.css('visibility', 'hidden');
        } else {
            item.css('visibility', 'visible');
        }
    });
});

jQuery fiddle vs javascript fiddle

JQuery隐藏/可见错误

5 个答案: