Question

我正在建立一个带有顶部导航栏的响应式网站。当窗口小于919px时，条形图消失并出现MENU按钮（通常隐藏{display: none;}）。点击后，它会打开一个下拉菜单，其中包含一个用于关闭下拉列表的十字架并返回MENU按钮：

<script>
function myFunction() {
$(document).ready(function(){
    $(".icon").click(function(){
        $(".icon").hide();
        $("#dropdown").show();
    });
});
}
</script>

<script>
function myFunction2() {
$(document).ready(function(){
    $("#cross").click(function(){
        $("#dropdown").hide();
        $(".icon").show();
    });
});
}
</script>

这一切都在网站的小版本中正常工作。但是，只要我单击MENU按钮至少一次并将网站重新调整为大于919px，按钮或下拉菜单（取决于打开的任何一个）都不会消失，除非我刷新页。

我理解jQuery的.show()以某种方式覆盖了我的CSS中的{display: none;}，但我无法弄清楚如何防止它。我会非常感谢有关如何解决此问题的任何想法！我是新手，非常乐意学习这种方法。

修改

$(document).ready(function(){
    $("#iconmenulink").click(function(){
		$("#iconmenu").addClass("dropdownnav_hidden");
		$("#dropdown").addClass("dropdownnav_shown");
    });
});

$(document).ready(function(){
    $("#cross").click(function(){
		$("#dropdown").addClass("dropdownnav_hidden");
		$("#iconmenu").addClass("dropdownnav_shown");
    });
});

.dropdownnav_shown {
  display:block;
  position: absolute;
  right: 28px;
  top:29px;
  float:right;
  background-color:white;
  border: 2px solid;
  border-color:#8A2BE2;
  text-decoration: none;
  padding:0;
}

.dropdownnav_hidden {
  display:none;
}


.dropdownnav_shown ul {
	list-style-type: none;
    transition: 0.3s;
    font-family: 'Karla', sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: black;
	padding-left:20px;
	padding-right:10px;
	line-height:150%;
	margin-top:5px;
	margin-bottom:10px;
}

.dropdownnav_shown ul li a {
    text-decoration: none;
	color:black;
	margin-right:10px;
	}

.dropdownnav_shown ul li a:visited {color: black;}
.dropdownnav_shown ul li a:hover {color:#8A2BE2;}



#iconmenu a {
	line-height:100%;
	padding:0;
	vertical-align:bottom;
}


#cross {font-size: 22px;
		text-align:right;
		margin-bottom:5px;
}

#cross a {color: #8A2BE2;
}

<div class="dropdownnav_shown" id="iconmenu">
	<ul> 
    	<li id="iconmenulink"> <a> MENU </a>
        <li>
    </ul>
</div>

<div class ="dropdownnav_hidden" id="dropdown">
	<ul>
    		<li id="cross"> <a href="#cross" onclick="myFunction2()"> × </a></li>
			<li><a href="#recordings">RECORDINGS</a></li>
			<li><a href="#news">NEWS</a></li>
            <li><a href="#cv">CV</a></li>
  			<li><a href="mailto:123@riseup.net">CONTACT</a></li>
            <li><a href="https://facebook.com/123" target=_blank>FB</a></li>

        </ul>
 </div>

Answer 1

您的问题是由JQuery .show（）引起的，它在显示的元素上设置内联样式。在CSS优先级规则方面，内联样式获胜。所以“display：none”的直接样式或者display：block被设置为超过你的CSS。

如果您希望CSS样式控制响应式布局，请尝试使用JQuery在元素上设置类，而不是在单击时使用show（）和hide（），如“is_shown”或“not_shown”等类可以使用，以便应用附加类（而不是强制内联样式）。

然后，您可以使用CSS规则（以及现有的媒体查询）

.is_shown {
  display:block;
}
.not_shown {
  display:none;
}

以这种方式cick只添加或删除了额外的CSS类，但你的CSS根据大小来控制布局和可见性...

你用相应的.addClass（）和.removeClass（）代替你的.show（）和.hide（）调用替换。

Answer 2

所以我最终使用jQuery RewriteCond %{HTTP_HOST} ^class\.11talk\.net$ [OR] RewriteCond %{HTTP_HOST} ^www\.class\.11talk\.net$ RewriteRule ^/?$ "http\:\/\/eng\.pinestalking\.com\/home\/eng\/index\/index\.html" [R=301,L]和.hide来解决它，但是在一个.show内完成，而不是隐藏一个<div>并显示另一个<div>。到目前为止适用于所有窗口尺寸。

.dropdownnav_shown ul {
  list-style-type: none;
  font-family: 'Karla', sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: black;
  padding-left: 20px;
  padding-right: 10px;
  line-height: 150%;
  margin-top: 5px;
  margin-bottom: 5px;
}
.dropdownnav_shown ul li a {
  text-decoration: none;
  color: black;
  margin-right: 10px;
}
.dropdownnav_shown ul li a:visited {
  color: black;
}
.dropdownnav_shown ul li a:hover {
  color: #8A2BE2;
}
#cross a:hover,
#iconmenulink a:hover {
  color: black;
}
#cross {
  font-size: 22px;
  text-align: right;
  margin-bottom: 5px;
  display: none;
}
#recordings,
#news,
#cv,
#contact,
#fb {
  display: none;
}
#dropdown {
  display: none;
}

}
@media screen and (max-width: 919px) {
  #dropdown {
    display: block;
    position: absolute;
    right: 28px;
    top: 29px;
    float: right;
    background-color: white;
    border: 2px solid;
    border-color: #8A2BE2;
    text-decoration: none;
    padding: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#iconmenulink").click(function() {
      $(this).hide();
      $("#cross, #recordings, #news, #cv, #contact, #fb").show();
    });
  });
</script>

<script>
  $(document).ready(function() {
    $("#cross").click(function() {
      $("#cross, #recordings, #news, #cv, #contact, #fb").hide();
      $("#iconmenulink").show();
    });
  });
</script>

<div class="dropdownnav_shown" id="dropdown">
  <ul>
    <li id="iconmenulink"> <a href="#menu"> MENU </a>
      <li id="cross"> <a href="#cross"> × </a>
      </li>
      <li id="recordings"><a href="#recordings">RECORDINGS</a>
      </li>
      <li id="news"><a href="#news">NEWS</a>
      </li>
      <li id="cv"><a href="#cv">CV</a>
      </li>
      <li id="contact"><a href="mailto:123@riseup.net">CONTACT</a>
      </li>
      <li id="fb"><a href="https://facebook.com/123" target=_blank>FB</a>
      </li>

  </ul>
</div>

避免jQuery在响应式导航菜单中覆盖CSS

2 个答案: