jquery for FAQ頁面

我對jquery沒有太多經驗，所以請原諒我的無知。我試圖提出一個常見問題解答，當問題被點擊時答案就會出現。這裏有一些測試代碼。很明顯，我沒有正確地使用jquery，因爲它不起作用。jquery for FAQ頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<title>Untitled Document</title> 
</head> 

<body> 
<script> 
$('li:not(".q")').hide(); 

$('li.q').click(
    function(){ 
     $('li:not(".q")').slideUp(); 
     $(this).toggleClass('open'); 
    }); 
</script> 

<ul> 
    <li class="q">Q1. Question 
    </li> 
    <li> A. Answer 
    </li> 
</ul>  

</body> 
</html>

來源

2016-06-24 Jonathan Grant

您需要將您的代碼移動到頁面的末尾或在文檔準備好處理程序 – j08691

$(document).ready(function(){ 
    $('.answer').hide(); 
    $('.question').on('click', function() {   
     $('.answer').toggle('show'); 
    }); 
});

你想這樣的事情，如果我得到你的權利。 https://jsfiddle.net/mprzmb7b/1/

來源

2016-06-24 16:33:48

包裹它的問題是，這打開所有的答案類。我只需要點擊出現的答案即可。 –

然後按照發布@Sheldon Griffin的代碼。它會解決你的問題。 –

使用jQuery的next（）方法（http://api.jquery.com/next/）可讓您使用li單擊您所使用的方法。

請注意，我使用show（）而不是addClass（'open'），因爲我不知道你的公開課是什麼 - slideUp（）將添加顯示：無所有的答案，所以你有確保你的公開課會覆蓋那個。

$(document).ready(function() { 
    $('li.q').on('click', function() { 
     $('li:not(".q")').slideUp(); 
     $(this).next().show(); 
    }); 
});

我還建議使用CSS類來讓您的答案在頁面加載時已隱藏;使用JavaScript來做到這一點可能會導致它們全都可見，然後很快隱藏起來。

li:not(.q) { display: none; }

來源

2016-06-24 17:49:12

jquery for FAQ頁面

回答

相關問題