Question

我正在尝试使用jQuery创建一个滑动的FAQ菜单，但是我收到一条错误，指出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()处理程序位于<h5>元素上，从那里它试图隐藏.next() 兄弟元素...没有任何那些。

而不是：

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

<a>上需要.nextAll()（搜索以下所有兄弟姐妹）的内容：

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

You can try it out here

或者，也许更清洁一点，你可以在锚点上添加一个类来简化事情，比如：

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

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

然后，由于您在<a>上，因此您不需要.parent()来电，如下所示：

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

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

You can try that version out here

Answer 2

更新：在Ant发布页面的公共URL后，我可以自信地重申我的说法，Ant在他原来的问题中发布的示例代码没有问题，所以谢谢你们谁投票给我。问题是Ant的页面同时使用了原型和jQuery库。原始问题省略了这一事实。这两个库与$ variable相互冲突。如果您更改代码Ant以使用关键字jQuery而不是$ everywhere作为

 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/

您的代码没有任何问题。你能把它放在公共网站上并分享网址吗？我唯一能想到的是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）。我认为这可能比你目前的方法更清洁。我从不喜欢使用<a>作为标题。

<强> 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;    
}

jquery hide（）函数

3 个答案: