jquery hide（）函數

Question

我試圖創建一個使用jQuery滑動FAQ菜單，但我得到一個錯誤，指出hide（）爲null。我已經在Mac和Firefox上的Chrome和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

更新：在Ant發佈頁面的公共URL後，我可以自信地重申我的觀點，即Ant在其原始問題中發佈的示例代碼中沒有問題，所以謝謝誰投下了我的投票。問題在於Ant的頁面同時使用了原型和jQuery庫。這個事實在原始問題中被省略了。這兩個庫與$變量衝突。如果你改變你的代碼螞蟻到處使用關鍵字的jQuery而不是$作爲

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

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

我相信你的代碼將工作。另外這裏

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

jQuery的頁面描述沒有什麼不對您的代碼，你可以使用無衝突技術。你可以把它放在公共網站上並分享這個網址嗎？我能想到的唯一的事情就是jQuery沒有被拉入。

嘗試在HEAD標籤

和javascript代碼閉幕後休息

</HTML> 

標籤

Answer 2

你.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 3

我已經颳起了一陣小移動

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

，如何做到這一點的簡單例子（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;  
}