Question

我正在尝试做一些文章列表，您可以使用复选框选择它们。如果您不确定是否选择，可以选择单击标题，并获取有关该文章的更多信息。

我已使用此example。那么问题出在哪里？我不想扩展我选择的文章，只是我点击标题的文章。

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放入art-list，art-head，低于art-check，我都看不到它。

这是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]标题

并且只需单击“标题”即可展开文章，单击复选框，选择文章而不展开文章。点击标题会展开下面的文章复选框和标题，它们仍然高于整个描述。

Answer 1

这是你想要做的吗？

http://jsfiddle.net/chrismackie/srG5k/

Answer 2

这是对的吗？

http://jsfiddle.net/chrismackie/S3rWC/

在JQuery可扩展标头之前添加Checkbox

2 个答案: