[jQ]滑出式問與答(Q&A)清單

您好～我有將您的程式碼複製下來～並且從新開啓一個頁面製作～但似乎都不動說～圖層命名方式也都跟您相同～想請問您是否有哪些地方要注意的～謝謝您～

老師，不好意思，請教一下，若是我的問與答需要在同一個頁面中自動換行，我需要在那邊做設定呢?或是設定每幾題(例如15題)就可以換到下一行，有使用Left控制，但是好像沒有效果，還是我的方法錯誤呢，麻煩老師解惑，謝謝^^

老師，不好意思，可能是我這邊說明的不清楚，目前需要的不是換頁，是換行，也就是限定一行有幾題，每幾題換一行，顯示在同一個頁面。如下圖：
1.XXX 6.XXX 11.XXX
2.XXX 7.XXX 12.XXX
3.XXX 8.XXX
4.XXX 9.XXX
5.XXX 10.XXX
因為程式是用問題與答案是用div包著，所以難達到此排列方式，因此改成span包覆，但是好像也沒換行的功能，請教老師有辦法可以解決嗎?

男丁您好：
　　現在遇到一個問題，想請問一下，這個範例我已經改成「滑鼠移過就會出現答案」，但所有版面會跟著動，能否改成滑鼠移過出現一個框，而答案放在那個框裡呢？
　　就像這頁最下方的「梅問題教學網」那樣，滑鼠移過去時會出現「梅問題教學網」的字樣，但出現的框裡我需要放很多文字及一張圖片。可否有解決方法，需要改那行的程式？
　　謝謝！

丁大...
是不是jQuery與Prototype.js非得擇一使用呢？？

男丁您好：
　　不好意思，那想請問一下，範例會需要等很久嗎？因為有點急！還是可以告訴我取「滑鼠座標的方式」我可以自己研究一下！
　　謝謝！

老師請問，若是採用範例1，要加"隱藏全部"和"全部展開"該怎麼寫呢?

謝謝老師的解答，還有一個問題，我把Q&A分類做成頁籤，我希望可以針對打開的那個頁籤裡的清單做全部展開和隱藏，要怎麼改呢？

男丁老師，如何一開始就先展開第一個項目？

to derek
還是不懂!為何我的畫面沒有出現問題、答案等等呢
當然也不會動了。可以貼個完整一樣的給我看嗎??

問題分類

問題
答案

ul, li {
margin: 0;
padding: 0;
list-style: none;
}
#qaContent {
width: 500px;
}
#qaContent h3 {
width: 500px;
height: 22px;
text-indent: -9999px;
}
#qaContent h3.qa_group_1 {
background: url(qa_group_1.gif) no-repeat;
}
#qaContent h3.qa_group_2 {
background: url(qa_group_2.gif) no-repeat;
}
#qaContent ul.accordionPart {
margin: 10px 10px 50px 30px;
}
#qaContent ul.accordionPart li {
border-bottom: solid 1px #e3e3e3;
padding-bottom: 12px;
margin-top: 12px;
}
#qaContent ul.accordionPart li .qa_title {
background: url(icon_q_a.gif) no-repeat 0px 3px;
padding-left: 28px;
color: #1186ec;
cursor: pointer;
}
#qaContent ul.accordionPart li .qa_title_on {
text-decoration: underline;
}
#qaContent ul.accordionPart li .qa_content {
margin: 6px 0 0;
background: url(icon_q_a.gif) no-repeat 0px -24px;
padding-left: 28px;
color: #666;
}
// 全部展開
$('#qaContent .qa_showall').click(function(){
$('#qaContent ul.accordionPart li div.qa_content').slideDown();
return false;
});

// 全部隱藏
$('#qaContent .qa_hideall').click(function(){
$('#qaContent ul.accordionPart li div.qa_content').slideUp();
return false;
});
$(function(){
// 幫 #qaContent 的 ul 子元素加上 .accordionPart
// 接著再找出 li 中的第一個 div 子元素加上 .qa_title
// 並幫其加上 hover 及 click 事件
// 同時把兄弟元素加上 .qa_content 並隱藏起來
$('#qaContent ul').addClass('accordionPart').find('li div:nth-child(1)').addClass('qa_title').hover(function(){
$(this).addClass('qa_title_on');
}, function(){
$(this).removeClass('qa_title_on');
}).click(function(){
// 當點到標題時，若答案是隱藏時則顯示它，同時隱藏其它已經展開的項目
// 反之則隱藏
var $qa_content = $(this).next('div.qa_content');
if(!$qa_content.is(':visible')){
$('#qaContent ul li div.qa_content:visible').slideUp();
}
$qa_content.slideToggle();
}).siblings().addClass('qa_content').hide();
});

不知是否漏掉什麼了