0
Ich habe this verfolgt und ich habe sehr minimale Kenntnisse von JavaScript oder von jQuery als noch nicht. Ich bin auf ein Problem gestoßen, als ich eine Website unter Verwendung des obigen Tutorials entwickelt habe, um eine reaktionsschnelle Mob-Navigation zu erstellen.Mobile Sub Navigation nicht die Hälfte der Zeit erweitern
Das Problem: Je nachdem, welche Größe der Browser beim Starten meines HTML-Dokuments hatte, funktioniert die Subnavigation nicht (es geht direkt zum Link, anstatt das Subnavigationsmenü zu öffnen), wenn der Browser gestartet wurde die Reichweite von etwa 600px, aber funktioniert, wenn auf einem kleineren Bildschirm Größe oder geschrumpft (manchmal) gestartet. Ich habe versucht, herauszufinden, wie dieses Problem zu beheben
Mein Code (Versuchte halten es minamil, sorry):
$(document).ready(function() {
//Creating the show/hide function with jQuery Toggle
$("#navToggle a").on ('click', function(event){
event.preventDefault();
\t
\t \t
$("header > nav").slideToggle("medium");
$("#logo").toggleClass("menuUp menuDown");
});
//Tidying up the Navigation Menu
$(window).resize(function() {
if($(window).width() >= "600") {
$("header > nav").css("display", "block");
\t \t \t $("header > nav > ul > li > a").siblings().removeAttr("style");
if($("#logo").attr('class') == "menuDown") {
$("#logo").toggleClass("menuUp menuDown");
}
}
else {
$("header > nav").css("display", "none");
\t \t \t //document.getElementById("categories").href = "categories/index.html";
}
});
//Creating the Drop Down Menu for Mobile Devices
$("header > nav > ul > li > a").click(function(e) {
if($(window).width() <= "600") {
if($(this).siblings().size() > 0) {
event.preventDefault();
$(this).siblings().slideToggle("fast")
\t \t \t \t $(this).children(".toggle").html($(this).children(".toggle").html() == 'close' ? 'expand' : 'close');
}
}
});
});.clearfix:before,
.clearfix:after {
\t content: " ";
\t display: table;
}
.clearfix:after {
\t clear: both;
visibility: hidden;
}
.clearfix {
\t *zoom: 1;
}
/* Navigation */
/* Mobile */
header > div#logo {
line-height: 70px;
position: relative;
}
header > .menuDown {
box-shadow: 0 3px 5px rgba(0,0,0,.15);
}
header > .menuUp {
box-shadow: none;
}
header > div#logo > h1 {
font-size: 48px; font-size: 3rem; /* 48px fallback */
font-weight: bold;
text-rendering: optimizeLegibility;
}
header > div#logo > div#navToggle {
background-color: rgba(0,0,0,.15);
position: absolute;
right: 0;
top: 0;
transition: 300ms all ease;
}
header > div#logo > div#navToggle:hover {
background-color: rgba(0,0,0,.1);
}
header > div#logo > div#navToggle > a {
color: rgba(255,255,255,.85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: 300ms all ease;
}
header > div#logo > div#navToggle:hover > a {
color: rgba(255,255,255,1);
}
header > nav {
background-color: rgba(0,0,0,0.20); \t
display: none;
flex: 1;
transform: 300ms all ease;
}
header nav > ul {
list-style-type: none;
}
header nav > ul > li {
border-bottom: 1px dotted rgba(0,0,0,.1);
position: relative;
}
header nav > ul > li:last-of-type {
border-bottom: none;
}
header nav > ul > li > a {
display: block;
color: rgba(0,0,0,.65);
font-weight: 700;
padding: 1.5rem 0;
text-decoration: none;
transition: 250ms all ease;
}
header nav > ul > li > a:visited {
color: rgba(0,0,0,.65);
}
\t \t \t \t
\t \t \t \t \t header nav > ul > li > a span.toggle {
\t \t \t \t \t \t background-color: rgba(0,0,0,.05);
\t \t \t \t \t \t border-radius: 3rem;
\t \t \t \t \t \t color: rgba(0,0,0,.25);
\t \t \t \t \t \t font-size: 0.75em;
\t \t \t \t \t \t font-weight: 500;
\t \t \t \t \t \t padding: 2px 8px;
\t \t \t \t \t \t text-transform: lowercase; \t
\t \t \t \t \t }
\t \t \t \t \t
\t \t \t \t \t header nav > ul > li > a span.caret {
display: none;
\t \t \t \t \t }
header > nav > ul > li:hover > a {
color: rgb(140, 193, 193);
}
header > nav > ul > li > nav {
background-color: rgb(51,51,51);
border-radius: 1.5em;
box-shadow: 0 2px 8px rgba(0,0,0,.6);
display: none;
overflow: hidden;
position: absolute;
right: 5%;
width: 90%;
z-index: 100;
text-align: left;
}
header > nav > ul > li > nav > ul > li > a {
color: rgba(255,255,255,.85);
transition: 300ms all ease;
font-size: 14px; /* Modify till find correct size */
}
header > nav > ul > li > nav > ul > li > a:visited {
color: rgba(255,255,255,.85);
}
header > nav > ul > li > nav > ul > li:hover > a {
background-color: rgba(0,0,0,.6);
color: rgba(255,255,255,1);
}
@media only screen and (min-width: 48rem) {
/* For tablets @768px: */
header > div#logo > div#navToggle {
display: none;
}
header {
background-color: white;
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
\t \t position: fixed;
\t \t width: 100%;
\t \t display:inline;
}
header > div#logo {
background-color: transparent;
line-height: 90px;
}
header > div#logo > h1 {
color: rgb(140, 193, 193);
}
header > nav {
background-color: transparent;
display: block;
}
header > nav > ul {
display: flex;
flex-flow: row wrap;
justify-content:space-around;
}
\t \t
header nav > ul > li {
border-bottom: none;
}
header nav > ul > li > a {
padding: 0 1.25rem;
}
\t \t \t \t \t
\t \t \t \t \t header nav > ul > li > a span.toggle {
\t \t \t \t \t \t display: none; \t
\t \t \t \t \t }
\t \t \t \t \t
\t \t \t \t \t header nav > ul > li > a span.caret {
border-bottom: 4px solid transparent;
border-top: 4px solid rgba(0,0,0,.65);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
\t \t \t \t \t \t border-radius: 1px;
\t \t \t \t \t \t content: "";
\t \t \t \t \t \t display: inline-block;
\t \t \t \t \t \t height: 0;
\t \t \t \t \t \t margin: 0 0 0 .25rem;
\t \t \t \t \t \t transition: 250ms all ease;
\t \t \t \t \t \t width: 0;
\t \t \t \t \t \t vertical-align: middle;
\t \t \t \t \t }
\t \t \t \t \t
\t \t \t \t \t \t header nav > ul > li:hover > a span.caret {
\t \t \t \t \t \t \t border-top-color: rgb(140, 193, 193);
\t \t \t \t \t \t \t transform: rotate(270deg);
\t \t \t \t \t \t }
header > nav > ul > li:hover > nav {
background-color: rgb(51,51,51);
border-radius: .25em;
box-shadow: 0 2px 8px rgba(0,0,0,.6);
display: block;
line-height: 3em;
right: -50%;
width: 12.25rem; /* 196px */
}
}
\t @media screen and (min-width: 95.625rem) {
header {
display:flex \t
\t }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<head>
\t <meta charset="utf-8">
<meta name="description" content="Daily technology walkthroughs for everyones needs ">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
\t <title>The Daily Tech Walkthroughs</title>
</head>
<header class="clearfix">
\t \t <div id="logo" class="menuUp">
\t \t <h1><a href="index.html"> The Daily Tech <br> Walkthroughs </a></h1>
\t \t <div id="navToggle"><a href="#">Menu</a></div>
</div>
<nav class="clearfix primary-nav">
\t <ul>
<li><a href="index.html">Home</a></li>
<li><a href="walkthroughs/index.html">Walkthroughs</a></li>
<li id="mobile-version-click">
\t <a href="categories/index.html"> Categories <span class="toggle">Expand</span><span class="caret"></span></a>
<nav>
<ul>
<li><a href="categories/index.html">All Categories</a></li>
<li><a href="categories/computers/index.html">Computers</a></li>
<li><a href="categories/consoles/index.html">Consoles</a></li>
<li><a href="categories/phones-tablets/index.html">Phones and Tablets</a></li>
<li><a href="categories/gadgets/index.html">Gadgets</a></li>
<li><a href="categories/other-tech/index.html">Other Technology</a></li>
</ul>
</nav>
</li>
<li><a href="create_a_walkthrough.html">Create a Walkthrough</a></li>
<li><a href="help/index.html">Help</a></li>
<li><a href="about.html">About</a></li>
<li id="mobile-version-click">
\t <a href="users/index.html">User <span class="toggle">Expand</span><span class="caret"></span></a>
\t \t <nav>
<ul>
<li><a href="users/index.html">Profile</a></li>
<li><a href="users/settings.html">Settings</a></li>
<li><a href="users/logout.html">Logout</a></li>
</ul>
</nav>
</li>
<li><div class="search"><input type="search" placeholder="search..." /></div></li>
\t \t \t </ul>
\t </nav>
</header>
</body>
</html>