javascript点击显示/隐藏内容

我正在尝试使用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扩展窗口，以便在下面列出消息本身。例如：

---

任何帮助都将不胜感激

您需要使用javascript，最好是jQuery。看看

及

或

看看正确的用法

<?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 
    }
?>

---

首先，这不是有效的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> 

---

这伤了我的眼睛。请用谷歌搜索手风琴插件，你正在以一种非常丑陋的方式重新发明轮子。codrops有一些漂亮的手风琴插件。你在开玩笑吗？这是一个标准答案吗？？？如果你只是给出一个提示，你应该给出一个注释而不是答案。hes数据库模式中的messageID是主键，根据定义，两条消息不能相同，因此，html中的消息id永远不会相同，除非他决定将消息前缀用于其他内容，或者使用相同的前缀长id字符串打印消息两次？所以这就是为什么你投我反对票。伟大的如果你真的想，你可以把它缩短为msg，或者m，如果你喜欢的话。没关系。当我为某人提供一个可以学习的示例时，我更喜欢让它更具可读性。当我使用此代码单击链接时，消息本身只会显示一小部分秒。你能告诉我如何修复它吗，因为这似乎正是我想要的。这个代码是用来做切换的。单击一次消息将显示，第二次单击将折叠消息。这就是全部。但是你说的真的出乎意料。请清楚地突出显示问题。仅来自：myusername是链接的一部分。如果我点击它，信息本身会在屏幕上闪烁几秒钟。如果我单击下面的主题：messageSubject，它会按预期扩展消息。因此，我需要将点击事件设置为链接部分From:myusername，而不是Subject:someSubjectDone。检查一下。我已经在from:username部分设置了链接操作。

<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>