个人中心
gpt4 book ai didi

javascript - 媒体查询在 798px 下不工作但在 1786px 上工作？

转载 作者：太空宇宙 更新时间：2023-11-04 01:25:39 26 4
gpt4 key购买 nike

好吧，我遇到了一个看起来很简单的问题。我有一个媒体查询，将导航从汉堡更改为 768 像素的扩展版本。但是它不起作用。

如:当它小于 768px 时应该应用汉堡导航，然后相应地扩展。

知道发生了什么，我认为这是一个我似乎无法发现的小错误

/* NAVIGATION ON CLICK */

// Primary menu drop down (mobile)
$(".dropdown-toggle").click(function() {
  $(this).parent().find(".sub-menu:first").toggleClass("toggle-on");
});


/* NAVIGATION ON HOVER */
// Sub menu drop down 
$(".main-navigation ul li.menu-item-has-children").hover(function() {
  $(this).find(".sub-menu:first").toggleClass("toggle-on");
});

$(".primary-toggle").click(function() {
  $(" .main-navigation ul:first").toggleClass("toggle-on");
});

// $(".main-navigation li.menu-item-has-children").mouseleave(function() {
//   $(".sub-menu").removeClass("toggle-on");
// });
/* 
	# HEADER
 */

*,
html {
  margin: 0;
  font-size: 36px;
}

.site-header {
  background-color: black;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* Burger Nav Styling */

#sidebar-btn {
  vertical-align: middle;
  width: 40px;
  height: 25px;
  cursor: pointer;
  margin: 10px;
  position: relative;
  top: 4px;
}

#sidebar-btn span {
  height: 2px;
  background: black;
  margin-bottom: 5px;
  display: block;
}

#sidebar-btn span:nth-child(2) {
  width: 75%;
}

#sidebar-btn span:nth-child(3) {
  width: 50%;
}


/* Main Menu */

.main-navigation {
  padding: 2rem;
}


/*.main-navigation .menu {
	display: none;
	padding: 1rem;

 }	*/

.menu-test-container {
  position: absolute;
  top: 264px;
  left: 0;
  width: 100%;
}

.main-navigation .menu.toggle-on {
  display: block;
}

.main-navigation ul li {
  min-width: 80px;
}

.main-navigation ul {
  display: none;
  padding: 1rem;
  position: relative;
  /*	display: flex;
 	flex-direction: column;*/
  background-color: yellow;
}

.main-navigation ul li a {
  color: #fff;
  text-decoration: none;
}


/* SUB Menu styles */

.sub-menu.toggle-on {
  display: block;
}

.main-navigation ul,
.main-navigation ul ul,
.main-navigation ul ul ul {
  list-style: none;
  position: relative;
  display: none;
}


/* Positioning x y of EACH sub menus */

.main-navigation ul ul {
  background-color: pink;
}

.main-navigation ul ul ul {
  left: 150px;
  top: 0;
  background-color: blue;
}

.main-navigation ul ul ul ul {
  background-color: green;
  top: 20px;
  left: 0;
}

.main-navigation ul ul ul ul ul {
  background-color: black;
  top: 0px;
  left: 200px;
}

.main-navigation ul ul ul ul ul ul {
  background-color: silver;
  top: 0px;
  left: 200px;
}


/* TABLET MENU */

@media screen and (min-width: 768px) {
  #sidebar-btn {
    display: none;
  }
  .primary-toggle {
    display: none;
  }
  .main-navigation ul {
    display: flex;
    flex-direction: row;
    background-color: blue;
  }
  .menu-test-container {
    display: block;
    position: relative;
    top: 0;
  }
}
<html>
<header id="masthead" class="site-header">
  <div class="site-branding">
    <div class="site-branding-text">
      <p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p>
    </div>
  </div>
  <!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation">
    <button class="primary-toggle" aria-expanded="false">
				<div id="sidebar-btn">
					<span></span>
					<span></span>
					<span></span>				
				</div>   
			</button>
    <div class="menu-test-container">
      <ul id="primary-menu" class="menu" aria-expanded="true">
        <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
          <a href="http://localhost/wordpress/services/">Services</a>
          <button class="dropdown-toggle" aria-expanded="false">
							<span class="dropdown-symbol">+</span>
						</button>
          <ul class="sub-menu">
            <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
              <a href="http://localhost/wordpress/asd/">Commercial</a>
              <button class="dropdown-toggle toggled-on" aria-expanded="true">
									<span class="dropdown-symbol">-</span>
								</button>
              <ul class="sub-menu">
                <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
                  <a href="http://localhost/wordpress/asd/">Rural</a>
                  <button class="dropdown-toggle toggled-on" aria-expanded="true">
											<span class="dropdown-symbol">-</span>
										</button>
                  <ul class="sub-menu">
                    <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
                      <a href="http://localhost/wordpress/services/">Electrical</a>
                      <button class="dropdown-toggle" aria-expanded="false">
													<span class="dropdown-symbol">+</span>
												</button>
                      <ul class="sub-menu">
                        <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
                          <a href="http://localhost/wordpress/gallery/">Residential</a>
                          <button class="dropdown-toggle" aria-expanded="false">
															<span class="dropdown-symbol">+</span>
														</button>
                          <ul class="sub-menu">
                            <li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
          <a href="http://localhost/wordpress/asd/">Projects</a>
        </li>
        <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
          <a href="http://localhost/wordpress/blog/">Blog</a>
          <button class="dropdown-toggle" aria-expanded="false">
							<span class="dropdown-symbol">+</span>
						</button>
          <ul class="sub-menu">
            <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
              <a href="http://localhost/wordpress/news-updates/">About</a>
              <button class="dropdown-toggle" aria-expanded="false">
									<span class="dropdown-symbol">+</span>
								</button>
              <ul class="sub-menu">
                <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
                  <a href="http://localhost/wordpress/news-updates/">News Updates</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  <!-- #site-navigation -->
  <link rel="stylesheet" type="text/css" href="style.css">
</header>

<body>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

最佳答案

好的，我明白了。我想我会把它贴在这里，这样我就可以结束这个问题了。

回答:缺少查看端口标签!确保在 html head 标记中包含以下内容 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

关于javascript - 媒体查询在 798px 下不工作但在 1786px 上工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48181914/

26 4 0
文章推荐： node.js - 启用 aws-xray serverless.yml
文章推荐： node.js - 如何将电子表格.values.batchUpdate 与 Google Cloud Functions 和 NodeJS 以及 'googleapis' 模块结合使用
文章推荐： node.js - 我怎样才能获得一个角色的成员，其最高角色是该角色
文章推荐： javascript - 在部分/粘性侧边栏上滚动时添加/删除类
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com