Question

我有类似下面的内容：

$grabarticles = $db->prepare("
    SELECT title, message
        FROM articles
");
$grabarticles->execute();
foreach($grabarticles as $articles) {
    echo $articles["title"];
    //when a user clicks the text above, reveal the below
    echo "<div id='article'><br/><br/>";
    echo "&nbsp;".$articles["message"];
    echo "</div><br/><br/>";
    //when a user clicks the $articles["title"] again, it then collapses
}

我不太熟悉Javascript知道，但我可以做些什么来使$articles["title"]可点击，并onclick展开以下显示{{{1}的内容1}}，但也可以与另一个$articles["message"]可逆？这是一张图片来说明：

desiredoutput

我希望每个onclick与另一个<div>分开，所以如果我通过点击$article["title"] //1打开＃1，然后点击相应的文字打开＃2，我就可以通过重新点击关闭＃1它不会干扰＃2。

Answer 1

将文章标题包装在可以绑定事件的DOM元素中，例如span。然后给它一个类，这样我们就可以轻松地定位它。

echo '<span class="article-title">', $articles["title"] ,'</span>';

接下来，id循环中的foreach应该是一个类，因为您生成了多个元素，并且只有一个元素可以包含一个ID。

echo "<div class='article' style='display:none;'><br/><br/>"; // <--note the "class" instead of "id"

现在只需点击一下即可查看元素的可见性。

$('.article-title').click(function(){
    $(this).next().toggle(); // find the next element after this one and toggle it's viibility
});

Answer 2

您想使用John Snyder撰写的collapsible DIV jQuery plugin。它完全符合您的要求。

我在博客上使用此功能，您可以看到它的示例here和here

示例HTML

<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <link href="/stylesheet.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.collapsible.js"></script>
    <div class='collapsible'>
       Header Text 1<span></span>
    </div>
    <div class='container'>
       <div class='content'>
          <div>
             Body Text 1
          </div>
       </div>
    </div>
    <div class='collapsible'>
       Header Text 2<span></span>
    </div>
    <div class='container'>
       <div class='content'>
          <div>
             Body Text 2
          </div>
       </div>
    </div>
</html>

CSS随之而来

/* START SECTION FOR COLLAPSEIBLE DIV */
.collapse-open {
/*    background:#000;
    color: #fff;*/
}

.collapse-open span {
    display:block;
    float:left;
    padding:10px;
    background:url(/images/minus.png) center center no-repeat;
}

.collapse-close span {
    display:block;
    float:left;
    background:url(/images/plus.png) center center no-repeat;
    padding:10px;
}

Answer 3

使用jscript

<script type="text/javascript">
$(function () {
    $('#testTitle').click(function (e) {
        if ($("#testcontent").is(":visible")) {
            $("#testcontent").slideUp("slow");
        }
        else {
            $("#testcontent").slideDown("slow");
        }
    });

});

链接</div>的可折叠<div> onclick

3 个答案: