Question

所以，这是我目前正在处理的网站，除此之外一切都很好：
当我收到其中一个回复我当前代码的人的警告时，我的菜单/导航在媒体查询状态下打开和关闭后消失，并重新调整为监视器宽度。

简化 - 请按照以下步骤查看问题：
打开代码片段（我会建议CodePen，因为结果在其中正确显示）并简要地欣赏我的设计。这就是它，谢谢你的帮助。开个玩笑，下一步：将浏览器的大小调整为所提及的大小（宽度为480px或更小），这样您就可以看到右上方的汉堡包菜单图标，打开菜单，点击图标，关闭它，然后将浏览器更改回完整屏幕尺寸！你看到左边的导航栏了吗？！
我在这里缺少什么？我认为它应该是一些后续状态的JavaScript（刚开始学习JS，所以我不知道），但请深入研究并教我可能溶液（S）。
是的，我知道，它不会影响我用我的媒体查询定位的任何移动用户，因为没有人会像这样调整大小，而且几乎没有人会看到这个，但是......第一件事 - 我想让它变得完美，第二件事 - 如果有什么我错过或做错了我想听听它并学习如何解决它/使它正确。
以下是CodePen链接：https://codepen.io/anon/pen/VxmMrJ
这是代码片段：

＆＃13;

DELIMITER $$

DROP TRIGGER IF EXISTS video_ratings_ad$$

CREATE TRIGGER video_ratings_ad
AFTER DELETE ON video_ratings
FOR EACH ROW
BEGIN
   -- declare local variables
   DECLARE li_cnt_r0  BIGINT;
   DECLARE li_cnt_r1  BIGINT;
   DECLARE li_cnt_r2  BIGINT;
   DECLARE li_cnt_r3  BIGINT;
   -- get counts of ratings for specific VID_ID
   -- and store counts in local variables 
   SELECT IFNULL(SUM(r.RATINGS='0'),0) AS cnt_r0
        , IFNULL(SUM(r.RATINGS='1'),0) AS cnt_r1
        , IFNULL(SUM(r.RATINGS='2'),0) AS cnt_r2
        , IFNULL(SUM(r.RATINGS='3'),0) AS cnt_r3
     FROM video_ratings r
    WHERE r.VID_ID = OLD.VID_ID
     INTO li_cnt_r0
        , li_cnt_r1
        , li_cnt_r2
        , li_cnt_r3
   ;
   -- update target table with rating counts from local variables
   UPDATE video_upload t
      SET t.RATE_BAD      = li_cnt_r0
        , v.RATE_AVERAGE  = li_cnt_r1
        , v.RATE_GOOD     = li_cnt_r2
        , v.RATE_BEST     = li_cnt_r3
    WHERE t.ID = OLD.VID_ID
   ;
END$$

DROP TRIGGER IF EXISTS video_ratings_ai$$

CREATE TRIGGER video_ratings_ai
AFTER UPDATE ON video_ratings
FOR EACH ROW
BEGIN
   -- declare local variables
   DECLARE li_cnt_r0  BIGINT;
   DECLARE li_cnt_r1  BIGINT;
   DECLARE li_cnt_r2  BIGINT;
   DECLARE li_cnt_r3  BIGINT;
   -- get counts of ratings for specific VID_ID
   -- and store counts in local variables 
   SELECT IFNULL(SUM(r.RATINGS='0'),0) AS cnt_r0
        , IFNULL(SUM(r.RATINGS='1'),0) AS cnt_r1
        , IFNULL(SUM(r.RATINGS='2'),0) AS cnt_r2
        , IFNULL(SUM(r.RATINGS='3'),0) AS cnt_r3
     FROM video_ratings r
    WHERE r.VID_ID = NEW.VID_ID
     INTO li_cnt_r0
        , li_cnt_r1
        , li_cnt_r2
        , li_cnt_r3
   ;
   -- update target table with rating counts from local variables
   UPDATE video_upload t
      SET t.RATE_BAD      = li_cnt_r0
        , v.RATE_AVERAGE  = li_cnt_r1
        , v.RATE_GOOD     = li_cnt_r2
        , v.RATE_BEST     = li_cnt_r3
    WHERE t.ID = NEW.VID_ID
   ;
END$$

DROP TRIGGER IF EXISTS video_ratings_au$$

CREATE TRIGGER video_ratings_au
AFTER UPDATE ON video_ratings
FOR EACH ROW
BEGIN
   -- declare local variables
   DECLARE li_cnt_r0  BIGINT;
   DECLARE li_cnt_r1  BIGINT;
   DECLARE li_cnt_r2  BIGINT;
   DECLARE li_cnt_r3  BIGINT;
   IF( OLD.RATINGS <=> NEW.RATINGS 
   -- if VID_ID and RATINGS is not changed, we can skip getting counts
   IF( NEW.VID_ID <=> OLD.VID_ID AND NEW.RATINGS <=> OLD.RATINGS )
   THEN BEGIN END
   ELSE
      -- get counts of ratings for OLD.VID_ID
      -- and store counts in local variables
      SELECT IFNULL(SUM(r.RATINGS='0'),0) AS cnt_r0
           , IFNULL(SUM(r.RATINGS='1'),0) AS cnt_r1
           , IFNULL(SUM(r.RATINGS='2'),0) AS cnt_r2
           , IFNULL(SUM(r.RATINGS='3'),0) AS cnt_r3
        FROM video_ratings r
       WHERE r.VID_ID = OLD.VID_ID
        INTO li_cnt_r0
           , li_cnt_r1
           , li_cnt_r2
           , li_cnt_r3
      ;
      -- update target table with rating counts from local variables
      UPDATE video_upload t
         SET t.RATE_BAD      = li_cnt_r0
           , v.RATE_AVERAGE  = li_cnt_r1
           , v.RATE_GOOD     = li_cnt_r2
           , v.RATE_BEST     = li_cnt_r3
       WHERE t.ID = OLD.VID_ID
      ;
      IF( NEW.VID_ID <=> OLD.VID_ID )
      THEN BEGIN END
      ELSE
         -- get counts of ratings for specific VID_ID
         -- and store counts in local variables 
         SELECT IFNULL(SUM(r.RATINGS='0'),0) AS cnt_r0
              , IFNULL(SUM(r.RATINGS='1'),0) AS cnt_r1
              , IFNULL(SUM(r.RATINGS='2'),0) AS cnt_r2
              , IFNULL(SUM(r.RATINGS='3'),0) AS cnt_r3
           FROM video_ratings r
          WHERE r.VID_ID = NEW.VID_ID
           INTO li_cnt_r0
              , li_cnt_r1
              , li_cnt_r2
              , li_cnt_r3
         ;
         -- update target table with rating counts from local variables
         UPDATE video_upload t
            SET t.RATE_BAD      = li_cnt_r0
              , v.RATE_AVERAGE  = li_cnt_r1
              , v.RATE_GOOD     = li_cnt_r2
              , v.RATE_BEST     = li_cnt_r3
          WHERE t.ID = NEW.VID_ID
         ;
      END IF;
   END IF;
END$$

DELIMITER ;

＆＃13;

function myFunction() {
    var x = document.getElementById("menu");
    if (x.style.display === "block") {
        x.style.display = "none";
    } 
    else {
        x.style.display =  "block";
    }
}

＆＃13;

@media only screen and (max-width: 480px) {
    
    .networks, .sidenav, .image-row, .foot1, .foot3 {
    display: none;
    }
    
    body {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #e1e1e1;
    }
    
    .page-wrap {
    display: block;
    margin-top: 0px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    }
    
    .logo {
    display: inline-block;
    float: left;
    width: 75%;
    margin-left: 2.5%;
    }
    
    .logoImg {
    width: 200%;
    }
    
    .menuIcon {
	display: inline-block;
    float: right;
	width: 10%;
    margin-top: 6%;
	margin-right: 5.5%;
    border: none;
    z-index: 3;
    }

    .navButton {
    display: block;
    width: 100%;
    background-color: #e1e1e1;
    border: none;
    z-index: 3;
    }
    
    .navButton:focus {
    outline: none;
    }
    
    #menu {
    display: none;
    position: relative;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 2.5%;
    padding-bottom: 2.5%;
    z-index: 3;
    }
    
    .main {
    display: block;
    width: 90%;
    height: auto;
    padding-bottom: 7.5%;
    margin-top: 2.5%;
    margin-left: 5%;
    margin-right: 5%;
    z-index: 1;
    }
    
    .textbox {
	display: block;
    width: 95%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.25em;
    text-align: justify;
    }
    
    .myPhoto {
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    }
    
    .foot2 {
    display: block;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
    font-size: 1.25em;
    color: #324B64;
    }
    
}

＆＃13;

Answer 1

最好使用仅在移动媒体查询中更改的CSS类来执行此操作。

https://codepen.io/anon/pen/KRmYVR

CSS

@media only screen and (max-width: 480px) {
  .mobileshow {
    display: block !important;
  }
}

JS

function myFunction() {
  var x = document.getElementById("menu");
  if(x.classList.contains("mobileshow")) {
    x.classList.remove("mobileshow");
  }
  else {
    x.classList.add("mobileshow");
  }
}

Answer 2

“element.style”的那些属性只能设置一个值而不是获取它们的值（你可以运行“console.log（x.style.display）”来证明它）。如果您必须获取元素的样式，请尝试“getComputedStyle”
通常，我会通过添加一个类来隐藏元素，并通过删除该类来显示它

string.split()

const el = document.querySelector('.some-element')

function hideElement() {
  if (!el.classList.contains('hidden')) {
    el.classList.add('hidden')
  }
}

function showElement() {
  if (el.classList.contains('hidden')) {
    el.classList.remove('hidden')
  }
}

.hidden {
  display: none;
}
/* you can try this, if you don't want that element to really disappear
.hidden {
  opacity: 0;
}
*/

调整浏览器大小时，我的导航将消失

2 个答案: