Question

我正在尝试构建一个应用程序，用户可以在右上角按下abutton（参见图像），隐藏一个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）
创建一个将{display: hidden}添加到HTML标记的CSS类
当用户点击该按钮时，将CSS类添加到相应的<div＆gt;

虽然这可以在纯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');
}

单击按钮时显示表单

2 个答案: