Question

我有一个div，它在主容器的顶部'覆盖'，使用相对定位的容器内的绝对位置。我试图得到它，以便当我点击一个按钮时，它会通过删除hide类来显示。它似乎没有任何效果，即使在控制台中我没有错误（并且newThread没有被隐藏。）

<div id='newThread' class='hide'>
    <form>
        <textarea></textarea>
    </form>
</div>

 #container { position: relative; }

 #newThread { 
 position: absolute;
 top: 50px;
 background-color: rgba(239, 239, 239, 0.9);
 left: 50px; width: 600px;
 min-height: 480px; border-radius: 5px;
 box-shadow: 5px 2px 5px #888; 
 }

 .hide { display: none; }

 $('#sidebar').html('<h1>Welcome to the forum!</h1><div class="container"><button class="btn btn-default" id="newThreadButton">New Topic</button><br /><button class="btn btn-default">Log out</button></div>');
 $('#sidebar').fadeIn();
 $('#newThreadButton').click(function() {
     $('#newThread').removeClass('hide');                       
 });

alert($('#newThread').hasClass('hide'));输出false。

http://jsfiddle.net/YBqMn/

Answer 1

动画在元素上可能是style="display:none;"。尝试执行$(element).show();

，而不是删除类隐藏

看到小提琴后，你在#newThread上有z-index: -1。将其更改为z-index: 2000，您将看到叠加层。（不确定这是否是你想要的）

我更新了你的小提琴： http://jsfiddle.net/YBqMn/1/

Answer 2

您将功能分配给页面上不存在的元素。你可以写到第一行：

<button class="btn btn-default" onclick="$('#newThread').removeClass('hide')">

Answer 3

元素#NewThreadButton不存在。

一种替代方案是

$('#newThread button, #newThread submit').click(function() {
     $('#newThread').removeClass('hide');                       
});

如果单击表单中的任何BUTTON或SUBMIT元素，将触发

。

确保表单中至少有一个BUTTON或SUBMIT。

Answer 4

我的错误是我将newThread放在我正在擦除ajax调用的同一容器中，因此当我更新侧边栏时元素不存在。我在文档加载时输出正常时计算出来，但在侧边栏动画开始时输出undefined。我不得不在表单周围添加一个包装器，将它与newThread div分开。我还必须删除z-index: -1，因为这会导致问题。

jQuery删除隐藏内容的类

4 个答案: