jquery hide() 函数

Question

我正在尝试使用 jQuery 创建滑动常见问题解答菜单，但收到一条错误，指出 hide() 为 null。我已经在 Mac 上的 Chrome 和 Firefox 以及 Win 上的 Firefox 中尝试过。这是代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.hide').hide();

    $('h5').click(function(){
    $(this).next().slideToggle("slow");
    return false;
});


});

这是 HTML：

<a href="#" ><h5 >The Heading </h5></a><br />

<div class="hide">
The content.
</div>

我花了过去三个小时翻阅在线书籍和教程，一切看起来都正确，但显然不是。 :P

非常感谢任何帮助。

Answer 1

您的 .click() 处理程序位于

上; 元素，从那里它试图隐藏 .next()< /a> 同级 元素...这些都没有。

而不是这样：

$(this).next().slideToggle("slow");

您需要类似 .nextAll() （在 上搜索所有以下同级：

$(this).parent().nextAll('.hide:first').slideToggle("slow");

您可以在这里尝试一下。

---

或者，也许更干净一点，您可以向锚点添加一个类来简化事情，如下所示：

<a class="toggler" href="#"><h5>The Heading </h5></a><br />

<div class="hide">
The content.
</div>

然后，由于您位于 上，因此不需要 .parent() 调用，如下所示：

$(document).ready(function() {
    $('.hide').hide();

    $('.toggler').click(function() {
        $(this).nextAll('.hide:first').slideToggle("slow");
        return false;
    });
});

您可以在此处尝试该版本。

Answer 2

更新：在 Ant 发布该页面的公共 URL 后，我可以自信地重申我的主张，即 Ant 在其原始问题中发布的示例代码没有问题，所以感谢那些对我投反对票的人。问题是 Ant 的页面同时使用原型库和 jQuery 库。原始问题中省略了这一事实。这两个库在 $ 变量上存在冲突。如果您将代码 Ant 更改为使用关键字 jQuery 而不是 $ ，

 jQuery(document).ready(function() {
     jQuery('.hide').hide();

     jQuery('.toggler').click(function() {
         jQuery(this).nextAll('.hide:first').slideToggle("slow");
         return false;
     }); });

我相信您的代码将有效。或者，您可以使用 jQuery 页面上描述的无冲突技术

http://api.jquery.com/ jQuery.noConflict/

您的代码没有任何问题。您可以将其放在公共网站上并分享 URL 吗？我唯一能想到的是 jQuery 没有被引入。

尝试将

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

HEAD 标签中的

和其余 javascript 代码移到结束

 </HTML>

标签之后

Answer 3

我已经制作了一个小而简单的示例来说明如何执行此操作（DEMO）。我认为这可能比您当前的方法更干净一些。我从来不喜欢使用 作为标题。

HTML

<div class="accItem">
    <div class="togHead">Heading1</div>
    <div class="togContent">The content1</div>
</div>

<div class="accItem">
    <div class="togHead">Heading3</div>
    <div class="togContent">The content3</div>
</div>

JS

$('.togContent:first').slideDown();
$('.togHead').click(function(){
    var item = $(this).parent().find('.togContent');
    if (! $(item).is(':visible')){
        $('.togContent').slideUp();
        $(item).slideDown("fast");
    }            
});

CSS

.togHead{
    width:300px;
    background:#000;
    color:#fff;
    font-size:20;
    font-weight:bold;
    cursor:pointer;
}
.togContent{
    display:none;
    width:300px;
    background:#ff0;    
}