javascript点击显示/隐藏内容

时间:2013-12-23 13:39:51

标签: javascript php jquery mysql message

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

我有一个这样的数据库设置:

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'];
?>

任何帮助将不胜感激

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

一,这是无效的html结构

<ul class='lbe_list'>
 - <li>                    
 - - <a href=''>
 - - </a>
 - </li>
 - </a>
</ul>

解决这个问题的基本思路是将包含你想要显示的内容的元素命名为id =“”并用style =“display:none”隐藏它,然后将onclick处理程序附加到应该显示它。 最基本的形式:

<ul class='lbe_list'>
<?php while($messages = mysql_fetch_array($result)){ ?>         
    <li>                    
    <a href="#" onclick="document.getElementById('message-<?php echo $messages['messageID']; ?>').style.display='block'">
        <?php echo "From: ".$messages['msgFrom']."&nbsp;Subject: ".$messages['subject'];?>
    </a> 
    </li>
    <li id="message-<?php echo $messages['messageID']; ?>" style="display:none">
        <?php echo $messages['message']; ?> 
    </li>
<?php } ?>
</ul> 

答案 2 :(得分:-1)

你需要使用javascript,最好是jQuery来做到这一点。看看

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://api.jquery.com/toggle/

查看正确的用法