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 を開くと、#2 に干渉することなく、もう一度クリックして #1 を閉じることができます。

4

3 に答える 3

2

イベントをバインドできる DOM 要素 (スパンなど) で記事のタイトルをラップします。次に、簡単にターゲットできるようにクラスを指定します。

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

次に、複数の要素を生成しており、1 つの要素のみが 1 つの ID を持つことができるため、ループ内はクラスである必要がありますid。foreach

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 に答える