点击显示/隐藏内容的javascript

Question

我正在尝试使用 php/mysql 开发一个私有(private)消息系统。

我的数据库设置如下:

CREATE TABLE IF NOT EXISTS `messages` (
  `messageID` int(25) NOT NULL AUTO_INCREMENT,
  `msgTo` varchar(24) NOT NULL,
  `msgFrom` varchar(24) NOT NULL,
  `subject` varchar(100) NOT NULL,
  `message` text NOT NULL,
  `sendTime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`messageID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

我列出了发送到特定用户名的消息，如下所示:

<?php               
 $query = "SELECT * FROM messages WHERE msgTo = '$username'"; // I know SELECT * should be avoided but there's not many columns here anyway
    $result = mysql_query($query);              
    while($messages = mysql_fetch_array($result)){   ?>         
        <ul class='lbe_list'>
        <li>                    
            <a href=''>             
            <?php
            echo "From: ".$messages['msgFrom']."</a>&nbsp;Subject: ".$messages['subject'];?>
    </li></a></ul>  
    <?php 
}

其中列出了邮件的发件人和主题。

但是，我希望能够单击此处的用户名和主题，并使用 JavaScript 展开窗口，以便它将在下面列出消息本身。就像下面这样:

<a href=''>             
<?php
    echo "From: ".$messages['msgFrom']."</a>&nbsp;Subject: ".$messages['subject'];?>
    </li></a></ul>
<?php 
// on click expand/hide $messages['message'];
?>

任何帮助将不胜感激

Answer 1

<?php               
 $query = "SELECT * FROM messages WHERE msgTo = '$username'"; // I know SELECT * should be avoided but there's not many columns here anyway
    $result = mysql_query($query);
    $m_no=0;
    while($messages = mysql_fetch_array($result))
    {
        $m_no++;
?>         
        <ul class='lbe_list'>
        <li>                    
            <a href=''>             
            <?php
                echo "<span id='$m_no' onclick=\"document.getElementById('body_".$m_no."').style.display=(document.getElementById('body_".$m_no."').style.display=='none'? 'block': 'none')\">"."From: ".$messages['msgFrom']."</span></a>&nbsp;Subject: ".$messages['subject'];
                echo "<div id='body_".$m_no."' style=\"display:none; border:2px solid green;\">".htmlspecialchars($messages['message'])."</div>";
            ?>
    </li></a></ul>  
<?php 
    }
?>

<强> fiddle here