0

我有如下内容：

$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在下面展开以显示 的内容$articles["message"]，但也可以与另一个可逆onclick？这是一张图片来说明：

期望输出

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

4

3 回答 3

2

将文章标题包装在可以绑定事件的 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 its visibility
});
于 2013-10-19T22:02:34.950 回答
1

您想使用John Snyder 编写的这个可折叠的 DIV jQuery 插件。它完全符合您的要求。

我在我的博客上使用了这个，你可以在这里和这里看到一个例子

示例 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;
}
于 2013-10-19T22:03:34.443 回答
1

使用脚本

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

});

于 2013-10-19T22:06:59.027 回答