チェックボックスを使用して選択できる記事リストを作成しようとしています。選択するかどうかわからない場合は、ヘッダーをクリックして記事の詳細情報を取得するオプションがあります。
この例を使用しました。では、どこに問題があるのでしょうか? 選択した記事を展開するのではなく、ヘッダーをクリックした記事だけを展開します。
JQスクリプト部分は問題ありません。問題なく動作し、正しく展開/折りたたまれます。問題はCSSまたはHTMLで、チェックボックスを配置してヘッダーに表示する場所です。
サンプルHTMLがあります：
<div class="art_list">
<div class="art_head"><div class="art-chk"><input type="checkbox" name="reguser" value="Deki" /></div>Artilk-1 </div>
<div class="art_body">Artikl 1 ima sve</div>
</div>
これにより、ヘッダーにチェックボックスが表示されますが、チェックすると記事が展開されます。
私もこれを試しました：
<div class="art_list">
<input type="checkbox" class="art-chk" name="reguser" value="Deki" />
<p class="art_head">Artikl-2 </p>
<div class="art_body">Artikl 2 ima sve</div>
</div>
ヘッダーのチェックボックスが非表示になり、アートリスト、アートヘッド、アートチェックの下に z-index を配置しようとしても、表示されません。
ここにJSがあります：
function hideShowArticles(){
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".art_body").hide();
//toggle the componenet with class msg_body
$(".art_head").click(function()
{
$(this).next(".art_body").slideToggle(600);
});
});
}
それで、私は何が欠けていますか？
必要: [X] ヘッダー
「ヘッダー」をクリックするだけで記事が展開され、チェックボックスをクリックして、記事を展開せずに選択します。ヘッダーをクリックすると、チェックボックスとヘッダーの下の記事が展開され、説明全体の上に残ります。