Question

我觉得我已经尝试了一切，但似乎无法正常工作。我有一个名为“ t”的变量，用于存储$ mobile_menu_height的值。该值当前设置为280px；

var t = "<?php $mobile_menu_height ?>";  //this is currently 280px

在脚本中，我想在这一行中摆脱硬编码的“ 288px”（我将保留8px的硬编码）

y.style.height = "calc(100vh - 288px)";

而是使用变量（我曾尝试使用't'和'$ mobile_menu_height'，但我都无法在自己的calc（）函数中工作。理想情况下，它看起来像这样：

y.style.height = "calc(100vh - 8px - t)";

或

y.style.height = "calc(100vh - 8px - $mobile_menu_height)";

但是我只是停留在如何使它工作上。可能是$ mobile_menu_height输入的WordPress清理（或缺少）的问题？我尝试输入带有和不带有“ px”测量值的输入，即“ 280”和“ 280px”。

我正在这里工作的完整脚本：

    <script>
        function toggleMobileNav() {
            var x = document.getElementById("container-mobile-menu");
            var y = document.getElementById("content-container");
            var t = "<?php $mobile_menu_height ?>";

            if (x.style.display === "none") {
                x.style.display = "block";
                y.style.top = t;
                y.style.height = "calc(100vh - 288px)";
            } else {
                x.style.display = "none";
                y.style.top = "62px";
                y.style.height = "calc(100vh - 68px)";
            }
        }
    </script>

Answer 1

您可以使用window.innerHeight来获得100vh等效值并像这样手动进行计算

const windowH = window.innerHeight + 8 + parseInt(t);
y.style.height = windowH + "px";

Answer 2

谢谢大家！它结合了您的答案来解决问题。我确实错过了回声，window.innerHeight就像魔术一样工作。我现在将清理这些变量名。为那些想知道的人在这里修复了代码。

    <?php
        $mobile_menu_height = get_theme_mod( 'mobile_menu_height_setting', '' );
    ?>
    <script>
        function toggleMobileNav() {
            var x = document.getElementById("container-mobile-menu");
            var y = document.getElementById("content-container");
            var mobile_menu_content_drop = "<?php echo $mobile_menu_height; ?>";
            if (x.style.display === "none") {
                x.style.display = "block";
                y.style.top = mobile_menu_content_drop;
                const windowH = window.innerHeight - 8 - parseInt(mobile_menu_content_drop);
                y.style.height = windowH + "px";
            } else {
                x.style.display = "none";
                y.style.top = "62px";
                y.style.height = "calc(100vh - 68px)";
            }
        }
    </script>

在calc（）函数中使用变量

2 个答案: