Question

据我所知，我已经设置了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;

}
}

Answer 1

使用媒体查询执行此操作，例如：

在桌面上显示＃skills-container

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

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

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

Answer 2

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

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

                        <ul>

                        </ul>
                     </nav>")

因为在javascript语句末尾可以使用回车符而不是分号（;）而中断的原因相同。

尝试：

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

使用jQuery删除和添加基于窗口宽度的元素不起作用

2 个答案: