小编Lee*_*xon的帖子

我正在建立一个摄影作品集.我的一些图像有裸露,所以我想默认隐藏它们,直到用户点击"Toggle Worksafe模式"按钮.

我可以用标准form post(和会话)来做,但是当用户back或reloads 时,这会导致"确认表单重新提交"错误.我试图找出一个AJAX post避免这种情况.

更新:这是工作代码.请注意,这不适用于"苗条"的jQuery发行版; 这是我遇到麻烦的主要原因之一.

图像索引页面:

<?php
    session_start();
    if (!isset($_SESSION['Worksafe_Mode'] {
        $_SESSION['Worksafe_Mode'] = 1;
    }
?>
<!-- other page content -->
<script src="scripts/jquery-3.2.1.min.js"></script>
<!-- other page content -->
<button type="button" id="Worksafe_Button" name="Worksafe_Button">
    Toggle Worksafe Mode
</button>
<script>
    $('#Worksafe_Button').click(function() {
        $.post("worksafe_mode_toggle.php")
            .done(function(data) {
                window.location.href = window.location.href;
        });
    });
</script>
<!-- other page content -->
<?php
$Connection = Connect();
$query = mysqli_query($Connection, 'SELECT uri, name, nsfw FROM images ORDER BY uri'); …

我希望用户单击按钮以显示隐藏的弹性框菜单.所以当然我知道如何处理正常的东西:

nav#test {
    display: none;
    flex-flow: column nowrap;
}

document.querySelector('#test').style.display = 'flex';

但是那个愚蠢的供应商前缀替代规则呢？以前从来没有出现过,我不知道如何处理它们.

编辑:为什么不Autoprefixer？

总之:wrap.在上面的例子中,我用过flex-flow: column nowrap;.但是,让我们说这个规则已经存在flex-flow: row wrap;.Autoprefixer只会为最近的浏览器提供修复,因为wrap旧版(但不是那么旧版)的Firefox和Safari [包括Chrome for iOS] 没有一个(不支持).

因此,如果您使用Autoprefixer,您的flex-flow: row wrap元素就会在这些浏览器上中断.根据设置,您的弹性儿童可能会直接从屏幕侧面运行.

也许你宁愿在这些情况下通过指定-webkit-box-orient: vertical甚至-moz-box-orient: vertical(现代的等价物flex-direction: column)提供替代布局.