0

我是 Jquery 的新手。我想在我的网站上制作浮动菜单。我创建了 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 可见性从隐藏更改为可见。但它似乎不起作用，也没有效果。

对于任何帮助，我将不胜感激。

4

5 回答 5

2

为了在点击时切换可见性，它尽可能简单。你不需要任何纯 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(); });
})();
于 2013-07-26T23:20:21.233 回答
1

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

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');
    }
 });
于 2013-07-26T23:15:10.970 回答
0

你可以使用类似的东西：

$('#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
于 2013-07-26T23:13:05.800 回答
0

尝试这个：

$('#item').on('click', function(e){
    $(this).css('display','none');
});
于 2013-07-26T23:13:27.783 回答
0

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

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

jQuery 小提琴与javascript 小提琴

于 2013-07-26T23:36:27.903 回答