点击右上角按钮切换隐藏主题区块/显示新增主题表单的实现问题

我目前在开发一款应用，有个交互需求需要实现：点击右上角的按钮（示意图已给出）时，隐藏展示主题（topics）对应的div区块，同时显示用于添加新主题的表单div区块。

我现有的相关PHP代码片段如下：

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-thumbnail" src="assets/images/profielfotos/'.$topic['klant_id'].'" alt="User Image">';
            }
            // 这里还有主题其他内容的输出代码，就不贴全了
            echo "</div>";
        } 
    }
}

解决这个需求的具体方案 #

要完成这个切换效果，得结合前端JS和HTML结构调整来实现，步骤很清晰：

1. 先调整HTML结构 #

首先得把主题列表和添加表单分别放在独立的容器里，给它们加唯一ID方便JS操作，同时放上触发切换的按钮：

<!-- 右上角的切换按钮 -->
<button id="toggleAddTopicBtn" class="btn btn-primary">添加新主题</button>

<!-- 主题列表的容器 -->
<div id="topicsContainer">
    <?php
    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-thumbnail" src="assets/images/profielfotos/'.$topic['klant_id'].'" alt="User Image">';
                }
                // 补充主题的标题、描述等内容
                echo "<h5>{$topic['topic_title']}</h5>";
                echo "<p>{$topic['topic_content']}</p>";
                echo "</div>";
            } 
        }
    }
    ?>
</div>

<!-- 添加主题的表单容器，初始设置为隐藏 -->
<div id="addTopicForm" style="display: none;">
    <form method="POST" action="handle-add-topic.php">
        <div class="form-group">
            <label>主题标题</label>
            <input type="text" name="topic_title" class="form-control" required>
        </div>
        <div class="form-group">
            <label>主题内容</label>
            <textarea name="topic_content" class="form-control" rows="3" required></textarea>
        </div>
        <button type="submit" class="btn btn-success">提交新主题</button>
        <button type="button" id="cancelAddTopic" class="btn btn-secondary ml-2">取消</button>
    </form>
</div>

2. 写JavaScript的切换逻辑 #

用JS监听按钮的点击事件，通过切换元素的display属性来实现显示和隐藏的切换：

// 获取页面上需要操作的元素
const toggleBtn = document.getElementById('toggleAddTopicBtn');
const topicsContainer = document.getElementById('topicsContainer');
const addTopicForm = document.getElementById('addTopicForm');
const cancelBtn = document.getElementById('cancelAddTopic');

// 监听切换按钮的点击事件
toggleBtn.addEventListener('click', function() {
    // 判断当前主题列表是否显示，来切换状态
    if (topicsContainer.style.display !== 'none') {
        topicsContainer.style.display = 'none';
        addTopicForm.style.display = 'block';
        toggleBtn.textContent = '返回主题列表';
    } else {
        topicsContainer.style.display = 'block';
        addTopicForm.style.display = 'none';
        toggleBtn.textContent = '添加新主题';
    }
});

// 监听取消按钮的点击，回到主题列表状态
cancelBtn.addEventListener('click', function() {
    topicsContainer.style.display = 'block';
    addTopicForm.style.display = 'none';
    toggleBtn.textContent = '添加新主题';
});

3. 可选：加个CSS过渡效果优化体验 #

如果想让切换更流畅，可以给容器加个过渡动画：

#topicsContainer, #addTopicForm {
    transition: all 0.3s ease-in-out;
}

这样点击按钮的时候，显示隐藏的切换会有平滑的过渡，用户体验更好。

内容的提问来源于stack exchange，提问作者signmeupbaby