0
我最近啓動了一個基於我爲我的投資組合網站創建的虛擬公司的項目。我遇到的問題實現了一段jQuery代碼來切換一個名爲hidden的類，它將設置類的展示位置爲none。我正在使用此類在某些媒體查詢斷點處切換移動導航。但是，隱藏的toggleClass不起作用。你們能幫助你們嗎？ 這裏是我的地盤： https://jorgeg1105.github.io/JG-Photography/JQuery toggleClass問題沒有按預期工作
//When the page loads, Fade in all divs with class hidden.
//Then Remove hidden class.
$(document).ready(function() {
$('div.hidden').fadeIn(2000).removeClass('hidden');
});
//Fade In all h3 with class hidden.
//Remove hidden class.
$('h3.hidden').fadeIn(3000).removeClass('hidden');
//Image Filter
$(document).ready(function() {
\t $("#mainnav ul li a").click(function(){
\t \t var category = $(this).attr("class");
\t \t if (category == "all"){
\t \t \t $("#imgcontainer img").addClass("hidden");
\t \t \t setTimeout(function(){
\t \t \t \t $("#imgcontainer img").removeClass("hidden");
\t \t \t });
\t \t }
\t \t else {
\t \t \t $("#imgcontainer img").addClass("hidden");
\t \t \t setTimeout(function(){
\t \t \t \t $("."+category).removeClass("hidden");
\t \t \t });
\t \t }
\t });
});
//When burger is clicked. Mobile nav and mainnav are toggled.
$(".burger").on("click", function(){
\t $("#mainnav").toggleClass("hidden");
\t $(".mobilenav").toggleClass("hidden");
});body {
\t margin: 0;
\t padding: 0;
\t display: flex;
\t height: 100vh;
\t overflow: hidden;
\t font-family: 'Raleway', sans-serif;
}
ul {
\t list-style-type: none;
}
#container {
flex: 1 0 0;
overflow-y: auto;
}
/*------------------------Classes to be added to the current active link on a page----------*/
.active {
\t color: #766E6B;
}
/*--------------Side Navigation Styles--------------------*/
#sidenav {
\t background-color: black;
\t color: white;
\t width: 60px;
\t text-align: center;
\t border-right: 6px solid #766E6B;
\t overflow-y: auto;
}
#sidenav ul {
\t display: flex;
\t flex-direction: column;
\t padding: 0;
\t margin: 0;
\t justify-content: center;
}
#sidenav ul li:first-child {
margin-bottom: auto;
}
#sidenav ul li:last-child {
margin-top: auto;
}
#sidenav a {
\t padding: 20px;
\t display: block;
}
#sidenav a:visited {
\t color: white;
}
#sidenav a:hover {
\t color: black;
\t background-color: white;
}
/*-------------Header Styles-------------------------------*/
header {
\t padding: 40px 30px;
\t background-color: #F7F6F2;
}
header h1, h3 {
\t font-family: 'Tangerine', cursive;
}
header h1 {
\t font-size: 90px;
}
header h3 {
\t font-size: 40px;
}
header a {
\t text-decoration: none;
\t color: black;
\t padding: 0 0 12px 0;
\t line-height: 1.5em;
}
header a:hover {
\t transition: color 1s;
\t color: #766E6B;
}
.smalltxt {
\t font-size: 12px;
}
.topnavitems {
\t padding: 20px;
\t position: relative;
}
/*------------------Main Navigation-----------------------*/
#mainnav {
\t display: flex;
\t justify-content: center;
\t background-color: black;
}
#mainnav li {
\t margin-right: 5px;
}
#mainnav a {
\t color: white;
\t text-decoration: none;
\t letter-spacing: 1px;
\t padding: 10px;
}
#mainnav a:hover {
\t font-size: 20px;
\t color: grey;
}
/*--------------------ImgContainer Area------------------------*/
#imgcontainer {
\t display: flex;
\t flex-direction: row;
\t flex-wrap: wrap;
\t padding: 30px 20px;
\t justify-content: center;
\t background-color: #F7F6F2;
}
#imgcontainer img {
\t flex: 1;
\t width: 40vh;
\t padding: 10px;
}
#imgcontainer img:hover {
\t border: 2px solid black;
}
/*-----------------------Footer Styles---------------------*/
footer {
\t background-color: #F7F6F2;
\t padding: 10px 20px;
\t border-top: 1px solid grey;
}
footer ul {
\t justify-content: center;
}
footer li {
\t margin-right: 10px;
}
.developer {
\t text-decoration: none;
\t color: black;
}
/*-------------------Js Fade In class-------------------*/
.hidden {
\t display: none;
}
/*-------------------Flexbox-----------------------*/
.col {
\t flex: 1;
}
.row {
\t display: flex;
}
/*----------------------Mobile Navigation------------------------*/
.mobilenav {
\t background-color: black;
\t justify-content: center;
\t display: none;
}
.mobilenav ul {
\t display: flex;
\t flex-direction: row;
\t margin: 0;
}
.mobilenav li {
\t margin-right: 10px;
}
.mobilenav a {
\t color: white;
\t text-decoration: none;
\t display: block;
\t padding: 20px;
}
.mobilenav a:hover {
\t background-color: grey;
}
.burger {
\t background-color: black;
\t width: 100%;
\t text-align: right;
\t display: none;
\t cursor: pointer;
}
.burger i {
\t color: white;
\t padding: 5px;
\t margin-right: 10px;
}
/*-----------------Mobile Footer------------------------------*/
.mobilefooter {
\t display: none;
}
.mobilefooter a {
\t color: black;
}
/*-----------Media Queries----------------------------*/
@media screen and (max-width: 1024px){
\t #sidenav {
\t \t display: none;
\t }
\t nav.mobilenav.row {
\t \t display: none;
\t }
\t .mobilefooter {
\t \t display: flex;
\t }
}
@media screen and (max-width: 930px){
\t #imgcontainer img {
\t \t width: 80vh;
\t }
}
@media screen and (max-width: 740px){
\t header a {
\t \t display: none;
\t }
\t .mobilenav {
\t \t display: flex;
\t }
}
@media screen and (max-width: 600px){
\t header h1 {
\t \t font-size: 70px;
\t }
\t header h3 {
\t \t font-size: 40px;
\t }
\t #imgcontainer img {
\t \t width: 95%;
\t }
\t #mainnav {
\t \t display: block;
\t }
\t #mainnav ul {
\t \t flex-direction: column;
\t \t width: 100%;
\t \t margin: 0;
\t \t text-align: center;
\t \t padding: 0;
\t }
\t #mainnav li {
\t \t border-bottom: 1px solid grey;
\t \t padding: 10px;
\t }
\t .mobilenav {
\t \t display: block;
\t }
\t .mobilenav ul {
\t \t flex-direction: column;
\t \t width: 100%;
\t \t margin: 0;
\t \t text-align: center;
\t \t padding: 0;
\t }
\t .mobilenav li {
\t \t border-bottom: 1px solid grey;
\t }
\t .burger {
\t \t display: block;
\t }
}<!DOCTYPE html>
<html>
<head>
\t <title>| J&D |</title>
\t <meta charset="UTF-8">
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <!--Custom CSS-->
\t <link rel="stylesheet" type="text/css" href="Styles/styles.css">
\t <!--Google Fonts-->
\t <link href="https://fonts.googleapis.com/css?family=Raleway:400i|Tangerine:700" rel="stylesheet">
</head>
<body>
\t <nav id="sidenav" class="row">
\t \t <ul class>
\t \t \t <li><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i></a></li>
\t \t \t <li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
\t \t \t <li><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
\t \t \t <li><a href="https://www.pinterest.com/" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
\t \t \t <li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
\t \t \t <li><a href="#"><i class="fa fa-arrow-up" aria-hidden="true"></i></a></li>
\t \t </ul>
\t </nav>
\t <div id="container">
\t \t <span class="burger"><a href="#" class="hamburger"><i class="fa fa-bars" aria-hidden="true"></i></a></span>
\t \t <nav class="mobilenav">
\t \t \t <ul>
\t \t \t \t <li><a href="index.html">Gallery</a></li>
\t \t \t \t <li><a href="#">About</a></li>
\t \t \t \t <li><a href="#">Questions</a></li>
\t \t \t \t <li><a href="#">Rates</a></li>
\t \t \t \t <li><a href="#">Contact</a></li>
\t \t \t </ul>
\t \t </nav>
\t \t <header>
\t \t \t <div class="row">
\t \t \t \t <div class="col">
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <div class="topnavitems hidden">
\t \t \t \t \t \t \t \t <a href="index.html">
\t \t \t \t \t \t \t \t \t <strong class="active">Gallery</strong>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <span class="smalltxt">Our Work</span>
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <div class="topnavitems hidden">
\t \t \t \t \t \t \t \t <a href="#">
\t \t \t \t \t \t \t \t \t <strong>About</strong>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <span class="smalltxt">D&J Photography</span>
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <div class="topnavitems hidden">
\t \t \t \t \t \t \t \t <a href="#">
\t \t \t \t \t \t \t \t \t <strong>Questions</strong>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <span class="smalltxt">Facts</span>
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t \t <div class="col">
\t \t \t \t \t <h1>D&J Photography</h1>
\t \t \t \t \t <h3 class="hidden"><em>"Explore. Create. Inspire."</em></h3>
\t \t \t \t </div>
\t \t \t \t <div class="col">
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <div class="topnavitems hidden">
\t \t \t \t \t \t \t \t <a href="#">
\t \t \t \t \t \t \t \t \t <strong>Rates</strong>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <span class="smalltxt">Your Investment</span>
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <div class="topnavitems hidden">
\t \t \t \t \t \t \t \t <a href="#">
\t \t \t \t \t \t \t \t \t <strong>Contact</strong>
\t \t \t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t \t \t <span class="smalltxt">Get In Touch</span>
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </div>
\t \t </header>
\t \t <span class="burger"><a href="#" class="hamburger"><i class="fa fa-bars" aria-hidden="true"></i></a></span>
\t \t <nav id="mainnav">
\t \t \t <ul class="row">
\t \t \t \t <li><a href="#" class="all">All</a></li>
\t \t \t \t <li><a href="#" class="food">Food</a></li>
\t \t \t \t <li><a href="#" class="people">People</a></li>
\t \t \t \t <li><a href="#" class="landmark">Landmarks</a></li>
\t \t \t \t <li><a href="#" class="nature">Nature</a></li>
\t \t \t \t <li><a href="#" class="sneakers">Sneakers</a></li>
\t \t \t </ul>
\t \t </nav>
\t \t <div id="imgcontainer">
\t \t \t <a href="Images/Food/FriedChicken.jpg"><img src="Images/Food/FriedChicken.jpg" class="food"></a>
\t \t \t <a href="Images/Nature/IcyMountains.jpg"><img src="Images/Nature/IcyMountains.jpg" class="nature"></a>
\t \t \t <a href="Images/Landmarks/EiffelTower.jpg"><img src="Images/Landmarks/EiffelTower.jpg" class="landmark"></a>
\t \t \t <a href="Images/People/Girl.jpg"><img src="Images/People/GuyInTrees.jpg" class="people"></a>
\t \t \t <a href="Images/Sneakers/GoldAndWhite.jpg"><img src="Images/Sneakers/GoldAndWhite.jpg" class="sneakers"></a>
\t \t \t <a href="Images/Food/ExoticDish.jpg"><img src="Images/Food/ExoticDish.jpg" class="food"></a>
\t \t \t <a href="Images/Nature/VastLandscape.jpg"><img src="Images/Nature/VastLandscape.jpg" class="nature"></a>
\t \t \t <a href="Images/Landmarks/LondonBridge.jpg"><img src="Images/Landmarks/LondonBridge.jpg" class="landmark"></a>
\t \t \t <a href="Images/People/GuyWithCap.jpg"><img src="Images/People/GuyWithCap.jpg" class="people"></a>
\t \t \t <a href="Images/Sneakers/Nike.jpg"><img src="Images/Sneakers/Nike.jpg" class="sneakers"></a>
\t \t \t <a href="Images/Food/ShrimpRice.jpg"><img src="Images/Food/ShrimpRice.jpg" class="food"></a>
\t \t \t <a href="Images/Nature/VeryGreenForest.jpg"><img src="Images/Nature/VeryGreenForest.jpg" class="nature"></a>
\t \t \t <a href="Images/Landmarks/RomanColosseum.jpg"><img src="Images/Landmarks/RomanColosseum.jpg" class="landmark"></a>
\t \t \t <a href="Images/People/OlderMan.jpg"><img src="Images/People/OlderMan.jpg" class="people"></a>
\t \t \t <a href="Images/Sneakers/Vans.jpg"><img src="Images/Sneakers/Vans.jpg" class="sneakers"></a>
\t \t \t <a href="Images/Sneakers/Yeezy.jpg"><img src="Images/Sneakers/Yeezy.jpg" class="sneakers"></a>
\t \t \t <a href="Images/Food/SteakTacos.jpg"><img src="Images/Food/SteakTacos.jpg" class="food"></a>
\t \t \t <a href="Images/Nature/MistyForest.jpg"><img src="Images/Nature/MistyForest.jpg" class="nature"></a>
\t \t \t <a href="Images/Landmarks/GermanyCastle.jpg"><img src="Images/Landmarks/GermanyCastle.jpg" class="landmark"></a>
\t \t \t <a href="Images/People/LittleGirl.jpg"><img src="Images/People/LittleGirl.jpg" class="people"></a>
\t \t </div>
\t \t <footer>
\t \t \t <ul class="row">
\t \t \t \t <li><p class="smalltxt">J&G Photography all rights reserved © 2017</p></li>
\t \t \t \t <li><p class="smalltxt">Designed and Developed by <strong><a href="http://jorgegoris.com/" class="developer">Jorge Goris</a></strong></p></li>
\t \t \t </ul>
\t \t \t <ul class="mobilefooter row">
\t \t \t \t <li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
\t \t \t \t <li><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
\t \t \t \t <li><a href="https://www.pinterest.com/" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
\t \t \t \t <li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
\t \t \t </ul>
\t \t </footer>
\t </div>
\t <!--jQuery-->
\t <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
\t <!--Font Awesome-->
\t <script src="https://use.fontawesome.com/d579f311e9.js"></script>
\t <!--Custom Js-->
\t <script src="js/custom.js"></script>
</body>
</html>
將具體寬度添加到''li''style =「width：150px; text-align：center;」'這樣閃爍就可以被刪除了.. –
@Champ Decay我不明白。我在600 px斷點處寬度爲100％，我的文本垂直對齊，但這與jQuery有什麼關係？ – Jorge
請只包括[一個最小，完整和可驗證的例子]（https://stackoverflow.com/help/mcve） –