0
我想做一些導航欄，但我是jQuery中的初學者。jQuery中可調整大小的導航欄
對於分辨率768px和更多我做了菜單，在光標懸停後（通過CSS中的媒體查詢）打開。
另一方面，對於小於768px的分辨率，我做了點擊後（通過jQuery）後打開的菜單。
下面是一個代碼：
$(function() {
if ($(window).width() <= 768) {
$('ul').hide();
$('.navb').click(function() {
$('.main').slideToggle();
$('.main>li>ul').slideUp();
$('.main>li>ul>li>ul').slideUp();
});
$('.sub-1').click(function() {
$('.main>li>ul').slideToggle();
$('.main>li>ul>li>ul').slideUp();
});
$('.sub-2').click(function() {
$('.main>li>ul>li>ul').slideToggle();
});
}
});body {
background: gray;
font-size: 20px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
background: darkkhaki;
}
@media (min-width: 768px) {
ul li {
width: 100px;
}
}
a,
a:hover,
a:focus,
a:visited {
color: #000;
text-decoration: none;
}
a {
display: block;
}
a:hover {
background: orange;
}
.main {
text-align: center;
}
@media (min-width: 768px) {
.main > li {
vertical-align: top;
display: inline-block;
margin-left: -6px;
}
.main > li > ul {
display: none;
}
.main > li:hover > ul {
display: block;
}
.main > li > ul > li > ul {
display: none;
}
.main > li > ul > li:hover > ul {
display: block;
}
.main > li > ul > li {
position: relative;
}
.main > li > ul > li > ul {
position: absolute;
top: 0;
left: 100px;
}
}
@media (max-width: 768px) {
.main > li:first-child {
border-top: 1px solid gray;
}
}
.navb {
background: darkkhaki;
height: 45px;
cursor: pointer;
}
.navb span {
float: right;
font-size: 35px;
margin: 5px 5px 0 0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="navb visible-xs">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</div>
<ul class="main">
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#" class="sub-1">Link 3<span class="glyphicon glyphicon-triangle-bottom"></span></a>
<ul>
<li><a href="#">Link 3.1</a>
</li>
<li><a href="#">Link 3.2</a>
</li>
<li><a href="#">Link 3.3</a>
</li>
<li><a href="#" class="sub-2">Link 3.4<span class="glyphicon glyphicon-triangle-right hidden-xs"></span><span class="glyphicon glyphicon-triangle-bottom hidden-sm hidden-md hidden-lg"></span></a>
<ul>
<li><a href="#">Link 3.4.1</a>
</li>
<li><a href="#">Link 3.4.2</a>
</li>
<li><a href="#">Link 3.4.3</a>
</li>
<li><a href="#">Link 3.4.4</a>
</li>
<li><a href="#">Link 3.4.5</a>
</li>
</ul>
</li>
<li><a href="#">Link 3.5</a>
</li>
</ul>
</li>
<li><a href="#">Link 4</a>
</li>
<li><a href="#">Link 5</a>
</li>
<li><a href="#">Link 6</a>
</li>
</ul>
</div>
</div>的問題是，當我打開網站上小於768px寬一切都很正常，但之後調整爲768px +事實並非如此。同樣的事情發生在我第一次打開它在768px + width並將其調整爲較低分辨率時。
我知道jQuery中有一個resize（）函數，但我讀到它不被推薦。我相信我的問題有一個簡單的解決方案，但我沒有找到它。我該如何解決它？請幫幫我。如果有人能給我鏈接到我想要的導航欄的腳本，我也會很gre gre。
如果它工作正常，什麼是你的問題？在這樣的情況下，把自己放在真實的世界裏。手機菜單工作正常嗎？它在桌面上工作正常嗎？在瀏覽JUST時，沒有人會調整頁面大小，以查看菜單是否中斷 - 在瀏覽網頁時，沒有人更改瀏覽器大小！ –