单击按钮时显示表单

Question

我正在尝试构建一个应用程序，用户可以在其中按下右上角的按钮（见图），该按钮将隐藏一个 div（主题）并显示另一个 div（我可以添加新主题的表单）。

这就是它的样子：

if(isset($actiefboardid)){
  $toppic = $app->get_topics($actiefboardid);
    if(count($toppic)>0){
     foreach($toppic as $topic){
       echo "<div class='user-block'>";
        if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) {
          echo '<img class="img-circle img-bordered-sm" src="/assets/images/profielfotos/'.$topic['klant_id']. '/' .$topic['foto'].'" />';
        } else {
          echo '<div class="fancyimg"><i class="img-circle img-bordered-sm fa fa-fw fa-user img-circle"></i></div>';
        } 
          echo "<span class='username'><a href='https://tom.lbmedia.nl/boards/".$url[1]."/".$topic['url']."'>". $topic['topicnaam'] . "</a>
           </span><span class='description'>
           <span style='float:right;margin-left:5px;'>".implode($app->count_reactie($topic['id'])) ." reacties
           </span> 
           <span style='float:right; color:lightgrey;' class='fa fa-comment'></span>
           <span class='badge bg-red' style='border-radius: 5px;'>" . implode($app->boards($topic['board_id'])) . "
           </span>
           laatste reactie: " .$app->tijd_reactie($topic['id']) . " door " .$app->reactieDoor($topic['id'])."</div></span>
           <hr></hr>
           <p></p>
             <form class='form-horizontal'>
               <div class='form-group margin-bottom-none'>
               </div>                        
             </form>
            ";
            } 
          } else {
            echo "Er zijn nog geen topics  bij dit board";
          }

这是显示主题的代码。现在我需要实现上述按钮。

Answer 1

您可以在触发点击事件时显示/隐藏表单和主题。 所以第一次，显示主题并隐藏表单，点击后，切换它们

Answer 2

从高层次的角度来看：

• 这是客户端功能，因此请使用 Javascript，而不是 PHP
• 在Javascript中声明一个变量（如var showTable = true）
• 创建一个 CSS 类，将 {display: hidden} 添加到 HTML 标记中
• 当用户点击按钮时，将 CSS 类添加到相应的<div>

虽然这可以在纯 Javascript 中完成，但使用 jQuery 或 Angular 之类的库会让您更轻松地完成这项任务。

jQuery 示例：

// In your CSS file
.hidden {
  display: hidden;
}

// In your JS File
var showTable = true;
$('#myButton').click(function() {
 showTable = !showTable;
 if (showTable) {
   $('#div1').addClass('hidden');
   $('#div2').removeClass('hidden');
 else {
   $('#div2').addClass('hidden');
   $('#div1').removeClass('hidden');
}