jquery - Off Canvas Mobile Nav - 在渲染过程中闪烁

标签 jquery html css

现场链接:My Site

JSFiddle:http://jsfiddle.net/MguqC/1/ * 请注意，JS Fiddle 包含正在执行类切换和其他操作的 java，但是当将视口(viewport)缩小到移动设备大小时，它的表现不太好。使用上面的实时链接以获得更好的视觉理解。

背景故事: 我已经为我的网站开发了一个非 Canvas 移动菜单，除了一些 jquery 类切换外，它只使用 CSS。导航是使用 PHP 动态生成的。最初，当我创建这个导航时，我有两个单独的导航实例，它们为同一个导航生成两组 HTML。一个使用 <nav> 生成, 和一个使用 <div id="nav"> .

<nav>一组 HTML 是为导航的全宽桌面版本设计的。 <div id="nav">一组 HTML 是使用媒体查询为网站的移动版本设计的。使用媒体查询，我只是将移动版本隐藏在桌面大小，然后在移动媒体查询中隐藏桌面版本并将#nav 设置为display: block;。

这完美地工作，没有图形问题或问题。

当前故事:

现在，我已将两个独立的导航合并为一个更具 flex 的 PHP 结构。也就是说，使用一组 HTML 并为移动设备等设置不同的样式会更加容易和高效。

我复制了站点并煞费苦心地将移动类更改为亲戚 nav > ul > li > ul选择器。 (不再使用导航 ID，因为我有一组 HTML，我必须让桌面和移动设备为一组 HTML 工作)。

出于某种原因，现在在任何移动设备上加载网站时(即使桌面浏览器缩小到移动大小)，当您加载页面时，您可以看到导航链接加载到页面上然后消失，因此出现“flash”。

我尝试将整个导航设置为 display: none;然后在我的媒体查询样式顶部 display: block;在媒体查询样式的底部，我认为我可以隐藏导航，直到它对其进行样式化并将其移出 Canvas ，然后在该点之后将其设置为 block ，以使其“重新出现”，即使它会在屏幕外。但无济于事……这行不通。

我正在寻找此 Flash 的修复程序，我并不特别关心它是如何完成的，只要它不会使用两组单独的 HTML 恢复到我以前的结构即可。

***请注意，下面的 CSS 确实引用了 ID #nav。这是准确的，我没有删除 ID，我只是没有用它来设计大部分导航的样式。导航 HTML 结构是子菜单导航的标准结构。 UL - LI - A，UL 在 LI 的内部，等等。

CSS:

/* 01. MAIN NAVIGATION STYLES */

#nav {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

nav { /* THIS HAS BEEN RESET BELOW */
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

nav ul li a:visited {
    color: #777;
}

nav > ul > li:hover > a {  /* USING > FORCES LI TO STAY IN HOVER STATE EVEN WHEN IN SUBNAV */
    color: #fff;
    text-decoration: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c')";
    background-image: -moz-linear-gradient(top, #555555, #4c4c4c);
    background-image: -ms-linear-gradient(top, #555555, #4c4c4c);
    background-image: -o-linear-gradient(top, #555555, #4c4c4c);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#555555), to(#4c4c4c));
    background-image: -webkit-linear-gradient(top, #555555, #4c4c4c);
    background-image: linear-gradient(top, #555555, #4c4c4c);
}

nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}






/* Sub nav styles start here */

nav ul li > ul { /* BASIC STYLING PLUS HIDE */  /* THIS HAS BEEN RESET BELOW */
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: 100%;
    left: 0;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul > li:hover > ul { /* ON HOVER MAKE SUB-NAV VISIBLE */
    display: block;
}

nav ul li ul li { /* THIS HAS BEEN RESET */
    position: relative;
    height: 40px;
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #fff;
}

nav ul li ul li a {
    color: #777;
    height: 24px;
    padding: 8px 12px;
    margin: 0;
    background: #fafafa;
}

nav ul li ul li a:hover { /* SUB-NAV HOVER STATE */
    color: #777;
    text-decoration: none;
    background: #fff;
    border-left: 5px solid #555;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}


/* SECOND LEVEL SUB NAV STYLES */

nav ul li ul li ul {
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: -2px;
    left: 100%;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul li ul li:hover > ul {
    display: block;
}

nav ul li .active {
    color: #fff;
    background: #8dc63f;
    background: -moz-linear-gradient(top,  #8dc63f 0%, #86bd3c 50%, #81b539 51%, #78a934 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8dc63f), color-stop(50%,#86bd3c),            color-stop(51%,#81b539), color-stop(100%,#78a934));
    background: -webkit-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -o-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -ms-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: linear-gradient(to bottom,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc63f', endColorstr='#78a934',GradientType=0 );
}

nav ul li a.active {
    color: #fff;
}


nav ul li a span.arrow {
    background: url(../../../images/nav/arrow-down.png) no-repeat 50% 50%;
    width: 9px;
    height: 9px;
    display: inline-block;
    overflow: hidden;
    margin-left: 10px;
    text-indent: -999em;
}

nav ul li ul li a span.arrow {
    text-align: right;
    text-indent: -999em;
    display: block;
    position: absolute;
    overflow: hidden;
    width: 9px;
    height: 9px;
    top: 16px;
    left: 100px;
    margin-left: 20%;
    background: url(../../../images/nav/arrow-right.png) no-repeat 50% 50%;
}

nav ul li ul li a:hover span.arrow {
    left: 105px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}



/* Mobile nav buttons */

.nav-btn {
  display: block;
  width: 1.6em;
  height: 25px;
  padding: -11px;
  border: 0;
  outline: none;
  background: #87be3c url("../../../images/nav/nav-icon.svg") center center no-repeat;
  background-size: 1.875em 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .nav-btn {
    background-image: url("../../../images/nav/nav-icon.png");
}

.nav-btn:hover, .nav-btn:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.close-btn {
  display: block;
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  border: 0;
  outline: none;
  background: url('../../../images/nav/close-btn.svg') left center no-repeat;
  background-size: 1.875em 1.875em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .close-btn {
  background-image: url("../../../images/nav/close-btn.png");
}

.close-btn:focus, .close-btn:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}







@media all and (min-width: 641px) {

.horizontal-mobile-nav {
    display: none;
}

} /* END MEDIA QUERY FOR MIN-WIDTH 641PX (DESKTOP/TABLET) */


@media all and (max-width: 640px) {

/* 3.0 MOBILE-NAV STYLES
-------------------------------*/
/* SET VISIBLE THE HORIZONTAL MOBILE NAV */

#nav* {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

.horizontal-mobile-nav {
    display: block;
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

.horizontal-mobile-nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

.horizontal-mobile-nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

.horizontal-mobile-nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

.horizontal-mobile-nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

.horizontal-mobile-nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}

/* RESET THE ABOVE STYLES IN PREPARATION FOR THE MOBILE NAV THIS HAS TO BE A MEDIA QUERY */
nav { height: auto; border: none; border-radius: 0; background-image: none); }
nav ul { position: relative; z-index: 10; display: block; width: auto; height: auto; padding: 0; margin: 0; }
nav ul > li { position: relative; display: block; height: auto; padding: 0; margin: 0; }
nav ul li:nth-child(1) { margin-left: 0; border-radius: none; }
nav ul li a { color: #777; text-decoration: none; display: block; height: auto; padding: 0; margin: 0; }
nav ul li a:visited { color: #777; }
nav > ul > li:hover > a { color: #fff; text-decoration: none; background-image: none;}
nav > ul > li:nth-child(1) > a { border-radius: 0; }
/* Sub nav styles start here */
nav ul li > ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li ul li { position: relative; height: auto; display: block; padding: 0; margin: 0; border: none; }
nav ul li ul li a { color: #777; height: auto; padding: 0; margin: 0; background: none; }
nav ul li ul li a:hover { color: #777; text-decoration: none; background: none; border-left: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/* SECOND LEVEL SUB NAV STYLES */
nav ul li ul li ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li .active { color: #fff; background: none; }



/* Mobile Nav styles */  /* actual media query stuff from old nav */
nav ul li a span.arrow {
    display: none;
}

nav ul li ul li a span.arrow {
    display: none;
}

#nav {
    position: absolute;
    top: 0;
    padding-top: 100px;
}

#nav:not(:target) { /* not sure what this does */
    z-index: 1;
    height: 0;
}

#nav:target .close-btn {
    display: block;
}

#nav .close-btn {
    position: absolute;
    top: 20px;
    left: 40px;
}

#nav .block {
    position: relative;
    padding: 0;
}


#nav > ul {
    border-bottom: 1px solid #444;
    box-shadow:         0px 15px 15px rgba(8, 8, 8, 0.75);
}

#nav li {
    position: relative;
    padding: 0;
    margin: 0;
}

#nav ul li:last-child {
}

#nav ul li ul li:last-child {
    border-bottom: none;
}

#nav li.is-active:after { /* NOT SURE IF THIS DOES A FUCKIN THING */
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.031em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
}

#nav li a { /* BUTTON STYLES AND SIZE */
    text-decoration: none;
    padding: 10px 0 10px 20px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;  
}

#nav ul li a {
    background: #222222;
    background: -moz-linear-gradient(left,  #222222 0%, #222222 40%, #000000 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#222222), color-stop(40%,#222222),      color-stop(100%,#000000));
    background: -webkit-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -o-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -ms-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: linear-gradient(to right,  #222222 0%,#222222 40%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 );
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
    filter: alpha(opacity = 80);
}

#nav li a:hover {
    color: #fff;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 40);
    filter: alpha(opacity = 40);
}

#nav ul li ul li a {  /* INDENT SUBNAV ITEMS */
    padding-left: 35px;
}

#nav ul li ul li a:hover {

}

#nav ul li ul li ul li a {
    padding-left: 50px;
}

#nav ul li ul li ul li a:hover {

}



/* crazy shit */

.js-ready #nav {
    height: 100%;
    width: 70%;
    background: url(../../../images/nav/hixs_pattern_evolution.png);
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
}

.js-ready #nav .block {
    background: transparent;
}

.js-ready #nav .close-btn {
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

.js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.js-ready #nav { /* move the nav off canvas */
    left: -70%;
}

.js-ready #canvas {
    left: 0;
}

.js-nav #inner-wrap {
    left: 70%;
}

.csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
}

.csstransforms3d.csstransitions.js-ready #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

}

HTML/PHP:

<section class="nav-container">

        <section class="horizontal-mobile-nav">
            <ul>
                <li class="mobile-nav-btn">
                    <a class="nav-btn" id="nav-open-btn" href="#nav">Mobile Navigation</a>
                </li>
                <li>
                    <a href="index.php">Home</a>
                </li>
            </ul>
        </section>

        <nav id="nav">


        <?php
            echo "<ul>";
                foreach ($nav_array as $nav_title => $nav_data) {

                    echo buildLinks($nav_title, $nav_data, $base, $title);
                }
            echo "</ul>";
        ?>

        <a class="close-btn" id="nav-close-btn" href="#header">Return to Content</a>

        </nav>
        </section><!-- end nav container -->

最佳答案

问题是有 三个 状态，你的导航可以在:

  • 桌面布局
  • 移动布局
  • 移动布局(禁用 JavaScript)

您看到的闪光灯是您在第三种状态下的导航样式。该脚本添加类 js-ready，然后您的导航才会从 Canvas View 中拉出。

修复非常简单，您已经准备好大部分 CSS。在你的 CSS 文件的第 396 行是这样的:

#nav:not(:target) { /* not sure what this does */
    z-index: 1;
    height: 0;
}

它的作用是提供一个非 JS 回退。尝试在 original example page 上关闭 JavaScript ，您会看到移动导航仍然可以通过使用 :target 伪类来工作。解决方法是将这些行添加到上面的选择器中:

overflow: hidden;
padding: 0;

然后，当您为 JavaScript 版本应用样式时(样式表的第 532 行)，重置这些属性:

.csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    overflow: visible;
    padding-top: 100px;
    ...
}

剩下要做的唯一一件事(如果您认为它是优先事项)就是修复第三种状态(没有 JavaScript 的移动布局)。您拥有 Modernizr 和大部分样式，所以这应该不会太困难。

关于jquery - Off Canvas Mobile Nav - 在渲染过程中闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15533963/

上一篇：Javascript slider 动态更改变量

下一篇：javascript - 如何使 Chrome 输入不可选择(但允许编辑)？

相关文章：

javascript - 如何从 jquery 回调中调用对象方法

javascript - 不能居中div

php - 使用 JQuery AJAX 将 JSON 数组保存到 mysql

jquery - 使 bootstrap 均匀分布并正确对齐 div

php - 即使数据存在于数据库中，SQL 也会返回空行

javascript - 如果我链接外部 javascript，它会在 dom 完全加载后运行吗？

html - 无法裁剪个人资料图片的特定部分

jquery - 这些滚动条是如何定制的？

html - Firefox 中的负定位绝对元素

html - 将包含未定义大小的图像的 div 放在另一个 div 的底部

©2024 IT工具网  联系我们