Question

我试图将其他JavaScript / jQuery用于多个宽度。为了轻松开始，我想在窗口宽度＆gt;时做20％当＆lt; 981和100％时981.这是我用其他剧本制作的剧本。

<script>
if ($(window).width() < 981){
    function openNav() {
        document.getElementById("mySidenav").style.width = "20%";
        document.getElementById("main1").style.marginLeft = "20%";
    }
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main1").style.marginLeft = "0";
    }
}
else ($(window).width() > 981){
    function openNav() {
        document.getElementById("mySidenav").style.width = "100%";
        document.getElementById("main1").style.display = "none";
    }
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main1").style.display = "block";
    }
}
</script>

我的HTML

<html>
<div id="mySidenav" class="sidenav">
    <a id="closebtn" onclick="closeNav()">&times;</a>
    <p> OVER MEZELF </p>
    <a href="/about/about.html">ABOUT</a>
    <p> PHP OPDRACHTEN </p>
    <a href="/bmi/bmi1.html">BEREKEN BMI</a>
    <a href="/array/array.html">ARRAY OPDRACHTEN</a>
    <p style="display:none;"> DOWNLOAD </p>
    <a href="download.zip" style="display:none;">DOWNLOAD ZIP BESTAND</a>
    <div id="date" style="color:#818181;font-size:15px;cursor:context-menu;font-weight:bold;text-transform:uppercase;margin-top:100%;"> <?php $today = date("F j, Y"); echo $today; ?></div>
    <div id="time" style="color:#818181;font-size:15px;cursor:context-menu;font-weight:bold;"></div>
</div>


<div id="main1">
    <span id="menu0" style="color:white;font-size:30px;cursor:pointer;" onclick="openNav()">&#9776; </span>
</div>
</html>

所以当窗口＆lt; 981显示100％，当＆gt; 981显示20％。但是这段代码不起作用。我希望有人知道。

（对不起荷兰语）

Answer 1

这是在Javascript中的else的结构

if (time < 10) {
    greeting = "Good morning";
} else if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

将您的代码更正为

if ($(window).width() < 981){
    function openNav() {
        document.getElementById("mySidenav").style.width = "20%";
        document.getElementById("main1").style.marginLeft = "20%";
    }
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main1").style.marginLeft = "0";
    }
    }
    else if ($(window).width() > 981){
    function openNav() {
        document.getElementById("mySidenav").style.width = "100%";
        document.getElementById("main1").style.marginLeft = "100%";
    }
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main1").style.marginLeft = "0";
    }
    }

Answer 2

您的函数应在if/else块之外声明，并使用var进行通信。你忘记了else IF

<script>
    var openWidth = "100%";
    function openNav() {
        document.getElementById("mySidenav").style.width = openWidth;
        document.getElementById("main1").style.marginLeft = openWidth;
    }
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main1").style.marginLeft = "0";
    }
    if ($(window).width() < 981){
        openWidth = "20%";

    } else if ($(window).width() > 981){
        openWidth = "100%";
    }
</script>

也可以通过CSS使用@media

来完成

@media only screen and (max-width: 320px) {
    /* Here you can set the width of open */
}

Answer 3

如果这是所有代码，那么我可以看到几个问题。

您有if和else，但最后一个需要else if。但这提出了另一个问题 - 如果是width < 981，那么如果是width > 981，但如果宽度恰好是981呢？最好只删除($(window).width() > 981)并将其设为正常的else语句，而不是添加if。
宽度检查何时运行？除非您在resize事件上运行该代码（并且不要这样做！），否则它将运行一次。因此，打开的大小将在页面加载时仅设置。如果您在此之后调整浏览器大小并超出981px阈值，则无法获得所需的结果。

那我为什么要说使用媒体查询呢？首先，让我们看一下JS，并使开/关函数非常通用：

function openNav() {
    $("html").addClass("navopen");
}
function closeNav() {
    $("html").removeClass("navopen");
}

我们现在基本上为页面设置状态，表示导航已打开或关闭。所以现在的CSS：

#mySidenav {
    width: 0;
}

#main1 {
    margin-left: 0;
}

html.navopen #mySidenav {
    width: 100%;
}

html.navopen #main1 {
    display: none;
}

@media (max-width: 981px) {
    html.navopen #mySidenav {
        width: 20%;
    }

    html.navopen #main1 {
        margin-left: 20%;
        display: block;
    }
}

现在，您可以在JS中使用简单的切换来设置导航是否打开，并使用CSS来完成剩下的工作。更容易处理，您也不必设置处理程序以查看浏览器视口大小是否发生变化。

Answer 4

我发现了我的问题......

<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>

与此同时：

               <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/white_three"
                        android:orientation="vertical">

                        <RelativeLayout
                            android:id="@+id/enter_bio"
                            android:layout_width="match_parent"
                            android:layout_alignParentBottom="true"
                            android:layout_height="130dp"
                            android:layout_marginBottom="10dp"
                            android:layout_marginTop="10dp"
                            android:paddingLeft="16dp"
                            android:paddingRight="16dp"
                            android:paddingTop="5dp">


                            <EditText
                                android:id="@+id/user_biography"
                                android:layout_width="match_parent"
                                android:layout_height="100dp"
                                android:hint="@string/biography_placeholder"
                                android:textAppearance="@style/TextAppearance.Font.Volkswagen"
                                android:textColor="@color/black_87"
                                android:textSize="16sp"
                                android:maxLength="160"
                                android:imeOptions="actionDone|flagNoFullscreen"
                                android:inputType="textAutoCorrect|textCapSentences"
                                />

                            <TextView
                                android:id="@+id/user_biography_counter"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_alignParentBottom="true"
                                android:layout_alignParentRight="true"
                                android:layout_marginEnd="18dp"
                                android:paddingBottom="5dp"
                                android:textAppearance="@style/TextAppearance.Font.Volkswagen"
                                android:textColor="@color/black_87"
                                android:textSize="14sp"
                                tools:text="60" />

                        </RelativeLayout>
                    </LinearLayout>

它有效...感谢您的帮助！

窗口宽度的jQuery函数

4 个答案: