使用 jQuery 根据窗口宽度删除和添加元素不起作用答案

【问题标题】：Removing And Adding Elements Based On Window Width Using jQuery Doesn't Work使用 jQuery 根据窗口宽度删除和添加元素不起作用
【发布时间】：2014-08-01 14:12:27
【问题描述】：

据我所知，我已经设置了我的 jQuery，以便它在窗口变得太小时时删除一些元素，并在窗口再次变大时将它们放回原处。如果没有附加元素的代码，它们会很好地删除自己。但是使用附加代码，它们永远不会消失。此外，jQuery window.width() 似乎与我的 css 媒体查询不同。提前致谢。

这是我的 jQuery：

$(window).resize(function () {

if ($(window).width() < 719) {

    $("#logo").remove();
    $("nav").remove();


}

else if($(window).width() > 719) {

    $("header").append("<nav>

                            <ul>

                                <li><a href = 'index.php' class='<?php if ($section == 'About') { echo 'selected'; }?>'>About</a></li>
                                <li class = 'greyed-out'>/</li>
                                <li><a href = 'work.php' class='<?php if ($section == 'Work') { echo 'selected'; } ?>''>Work</a></li>
                                <li class = 'greyed-out'>/</li>
                                <li><a href = 'contact.php' class='<?php if ($section == 'Contact') { echo 'selected'; } ?>''>Contact</a></li>

                            </ul>

                        </nav>");

    //<div id = "logo"><img src = "img/logo.png"></div>
}

});

这是我的媒体查询。我不得不在 if 语句中摆弄 jQuery 宽度，以使元素消失并大致同时应用相应的样式（719 px！= 738）：

@media(min-width: 1250px) {

#skills-container {

    margin-left: auto;
    margin-right: auto;

    max-width: 810px;
}
}


@media(max-width: 738px) {

html {

    width: 100%;
    background-image: none;
    border: none;

}

.wrapper {

    width: 100%;
    margin-left: 0;
}

.page-section, footer {

    width: 98%;
    margin-left: 1%;
}

header {

    width: 100%;
    margin: 0;
    background-color: #00bf8a;

}
}

【问题讨论】：

这里可能更有效（也更容易）的是仅使用媒体查询来隐藏/显示元素，而不是使用 jQuery 从 DOM 中实际添加/删除它们。您是否考虑过该选项，或者是否有无法使用它的原因？
请原谅我的无知，但这种操作是在浏览器中进行的。 PHP 代码（在您的 append 函数中）将如何在浏览器中运行？
@AllenKing 我假设 JS 必须在 PHP 页面中，在这种情况下，它将在 JS 运行之前设置。但否则，这将是一个问题。
@AndrewPolland window.resize 函数不会将更新的页面发送回服务器，浏览器当然无法在本地解密 php。可能是我错过了什么。
@AllenKing 再次，我只是猜测它是这样设置的。但是如果这个 JS 是在 PHP 页面中设置的，那么 PHP 变量不会在加载时在 JS 代码中设置。那么无论调用多少次JS函数，变量都不会改变，而是在服务器输出的代码中永久设置。

标签： jquery css window

【解决方案1】：

使用媒体查询，例如：

在桌面上显示#skills-container

@media(min-width: 1250px) {#skills-container {display: initial;} }

在平板电脑上隐藏#skills-container

@media(max-width: 738px) {#skills-container {display: none;}

【讨论】：

这种技术会只是隐藏元素，还是会让样式表现得好像它们根本不存在一样？
“删除”与“不显示”不同。删除会将元素从 DOM 中取出。 Display:none 会将其保留在 DOM 中，但不会显示。
样式会表现得好像它们不存在但它们仍然存在于 DOM 中
@AlanSutherland 感谢您的回复。我查看了文档并显示：无；应该可以达到我想要的效果。我在媒体查询之外的元素上尝试了该属性。它在那里工作。但是，在我的媒体查询中却没有。
感谢大家的帮助。我设法解决了我的问题。我只需要应用显示：无； div 和里面的 img 的属性。我不断地对在这里获得帮助的速度和友善感到惊讶！不幸的是，我没有足够的声望来投票，但如果可以的话，我会的。

【解决方案2】：

我同意为此使用媒体查询，但要回答为什么您的 jQuery 不起作用，可能是因为您的 $.append() 中有回车

$("header").append("<nav>

                        <ul>

                        </ul>
                     </nav>")

出于同样的原因，您可以在 javascript 中的语句末尾使用回车而不是分号 (;)。

试试：

$("header").append("<nav><ul></ul></nav>")

【讨论】：