Question

我一直在努力解决这个常见的社交网络功能。我想要做的是扩展div以显示评论，我确定你知道我在说什么。

用户发送的每个post都会自动回显一个锚链接Comments。如上所述，当点击此链接时，它只会展开显示分配给thought_id的所有评论的div。

即使没有为帖子分配评论，我仍然希望div扩展以显示文本字段，这样任何用户都可以发表评论，最好回复一下：

<?php
<form action='' method='post' enctype='multipart/form-data'>
      <table style='width:850px;'>
           <tr>
               <td><textarea name='msg' rows='2' maxlength='255' cols='80' placeholder=' add your comment...'></textarea></td>
               <td><input type='submit' name='send' value='Share'/> </td>
           </tr>
       </table>
</form>
?>

这是我到目前为止的内容：

<script language="javascript">
    var id = <?php echo $thought_id; ?>;
    function toggle(id) {
        var ele = document.getElementById("toggleComment" + id);
        if (ele.style.display == "block") {
            ele.style.display = "none";
        } else {
            ele.style.display = "block";
        }
    }
</script>

这里是找到comments锚链接的地方。由于它非常冗长，我将回声内容仅减少到相关代码：

echo "<div class='message_wrapper'>

        <div class='where_msg_displayed'>
            <div class='more_options' style='float: right;'>

                // Options, and display picture of the user who posted the 
                // thought can be found here.

            </div>
        </div>

    <div class='where_details_displayed'> 
        <div class='mini_nav' style='float: right;'>

            // Below is the comments anchor link.
            <a onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a> 

        </div>  

            // I expect the following piece below to every comment assigned to the thought_id in the database.
        <div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
            <br/> $comment_posted_by said: $comment_body
        </div>

    </div>
</div>";

其他信息：

$thought_id是用户帖子的ID。（表user_thoughts，列id）。
我有另一个名为user_comments的表，该表存储了所有评论，并将其链接到thought分配给它的post_id。
目前，点击comments。

Answer 1

根据OP的

的PHP代码

<?php
$thought_id         = 1;
$num_of_comments    = 10;
$comment_posted_by  = "Me";
$comment_body       = "test comment body";
//hard coded above vars to achieve assumptions

echo "<div class='message_wrapper'>
        <div class='where_msg_displayed'>
            <div class='more_options' style='float: right;'>
                // Options, and display picture of the user who posted the 
                // thought can be found here.
            </div>
        </div>
    <div class='where_details_displayed'> 
        <div class='mini_nav' style='float: right;'>
            // Below is the comments anchor link.
            <a href='' onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a> 
        </div>  
        // I expect the following piece below to every comment assigned to the thought_id in the database.
        <div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
            <br/> $comment_posted_by said: $comment_body
        </div>
    </div>
</div>";
?>

<强>的JavaScript

<script language="javascript">
    var id = <?php echo $thought_id; ?>;
    function toggle(id) {
        var ele = document.getElementById("toggleComment" + id);
        if (ele.style.display == "block") {
            ele.style.display = "none";
        } else {
            ele.style.display = "block";
        }
        return false;
    }
</script>

上面的代码对我有用，按照单个记录。

现在您已在jQuery

下标记了您的问题

你可以简单地使用

$(".message_wrapper .mini_nav a[href!='']").click(function() {
    $(this).parent().next().toggle();
});

Answer 2

您只需使用充当公开三角形的<details> HTML标记即可。

<details>
    <summary>View comments</summary>
    <ul>
        <li>You comments</li>
        <li>You comments</li>
        <li>You comments</li>
    </ul>
</details>

https://developer.mozilla.org/en/docs/Web/HTML/Element/details

唯一的问题是可爱的IE浏览器不支持它。

Answer 3

首先，here是您希望根据代码实现的工作示例。

我不得不删除php部分，因为jsfiddle没有解释它，所以接下来是你的代码，包括PHP位。

我假设你在问题中添加了jquery标签时加载了jQuery。

知道为什么你尝试的东西不起作用很复杂，因为我们缺少重要的一点，比如：你如何将你的内容加载到DOM中？动态与否（ajax？）

HTML / PHP

<div class='message_wrapper'>
    <div class='where_msg_displayed'>
        <div class='more_options' style='float: right;'>
        </div>
    </div>

    <div class='where_details_displayed'>
        <div class='mini_nav' style='float: right;'>
            <a href="#" class="toggle-comment" data-id="<?=$thought_id?>" style='padding-left: 5px;'>  Comments (<?=$num_of_comments?>) </a>
        </div>
        <div id='toggleComment<?=$thought_id?>' class='new_comment' style='display:none;'>
            <br/> <?=$comment_posted_by?> said: <?=$comment_body?>
        </div>
    </div>
</div>

您的链接缺少href属性，必须正确显示该属性。所以我们将它设置为常用的“＃”，这意味着空白锚。然后我们需要在此链接上捕获click事件并阻止其默认操作，以便我们在url中看不到那个丑陋的＃
你应该避免在php var中存储大块的html然后echo，而是使用html模板。
你应该避免在你的代码中将PHP和javascript混合在一起，将php var分配给js one var id = <?php echo $thought_id; ?>; 相反，您可以将您的think_ids存储为链接的数据属性，并稍后使用jQuery的data()轻松获取它们。

的Javascript

$(function() {
    $("a.toggle-comment").on("click", function(event) {
        // prevents browser to go to href's #
        event.preventDefault();

        // uses Jquery's data() function to get comment id from link's data-id attribute
        var id = $(this).data('id');

        // get element by id and toggle display
        var ele = document.getElementById("toggleComment" + id);
        $(ele).toggle();
    });
});

在这里，我摆脱了你的toggle（）函数，并使用jQuery的on()替换为处理函数，每次我们点击具有toggle-comment CSS类的链接时都会调用它。它具有在加载页面后处理动态添加内容的优点。 jQuery的on（）文档页面很好地解释了这个（以及不推荐使用的live（）页面）

请注意，您需要将此toggle-comment课程添加到每个Comments (X)链接

如果您不熟悉jQuery，则应考虑阅读this page以了解第一行的作用以及您需要它的原因。（指将您的代码括在$(function() {...});）

event.preventDefault();告诉浏览器在点击链接时没有执行其默认行为（转到该链接并将＃附加到地址栏）

$(this).data('id');读取将单击的链接（this）放入jQuery对象并使用data（）获取其data-id属性的值，该属性设置为$ thought_id

CSS问题更新

请参阅我的updated fiddle了解您的CSS问题，我删除了浮动内联样式，并使用相对于message_wrapper的绝对定位来定位div.mini_nav。我认为这个问题与原始问题无关，应该在另一个问题中提出。

Answer 4

如果我正确理解您的问题，那就是您正在寻找的 https://jsfiddle.net/vrqsz3ev/7/

<div class='message_wrapper'>
 <div class="main-msg-container">
    <div class='where_msg_displayed'>
          <input type="hidden" id="msg-id" value="1">
          <div class='more_options'>    
          MESSAGE1
          </div>
          <div class='mini_nav'>
           <button class="open-comment">comments</button>
         </div>
    </div>

   <div class="hide-mess-details">
     <div class='where_details_displayed'> 
        <div id='toggleComment1'class='new_comment msg-id-1'>
           sachin said: Hii guysss (cmt of msg 1)
        </div>

        <form action='' class="comment-form"method='post' enctype='multipart/form-data'>
    <textarea name='msg' placeholder=' add your     comment...'></textarea>
    <input type='submit' name='send' value='Share'/> 
       </form>

    </div>
 </div>

</div>

我使用 jQuery 制作了它在查看代码时，有些需要注意的事项是

在css3中使用flexbox的概念来设计它。
如果单击share按钮，则只会更新相应消息的注释。为了检查，我在单击comment按钮时添加了消息ID以及表单。用于检查目的我添加了警报（相应消息的消息ID）如果单击{{1 }}
现在，您可以使用php

share button

显示.where_msg_displayed下的所有评论（如果您愿意，可以在相应的消息下添加详细信息 - 需要少量修改）

如果您继续使用此代码，只需很少编辑即可达到上述要求。

努力根据数据库中的动态数据扩展div（评论功能）

4 个答案:

HTML / PHP

的Javascript

CSS问题更新