Мой код не обнаруживает никакого щелчка
Я попытался связать JQuery в своем коде, но он не обнаруживает никаких кликов.
Мой код выглядит следующим образом:
главная страница
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="CollegeDays.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="css/Style.css" rel="stylesheet" />
<script src="Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.12.1.min.js" type="text/javascript"></script>
<link href="Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript">
$('.menu-toggle').click(function () {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
</script>
<title>Chef Tushr's College Days</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<header>
<div class="container">
<h1 class="logo">Generico<span>Logo</span></h1>
<nav class="site-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
CSS
body {
background: #F0F8EA;
font-family: 'Quicksand', sans-serif;
}
.container {
width: 95%;
max-width: 1000px;
margin: 0 auto;
}
header {
background: #E54B4B;
color: #EBEBD3;
padding: 1em 0;
position: relative;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: left;
font-size: 1rem;
margin: 0;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
top: 100%;
right: 0;
background: #464655;
height:0px;
overflow:hidden;
}
.site-nav--open {
height:auto;
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: 1px solid #575766;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
color: #EBEBD3;
display:block;
padding: 2em 6em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background-color: #E4B363;
color: #464655;
}
.menu-toggle {
padding: 1em;
position: absolute;
top: .5em;
right: .5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #EBEBD3;
height: 3px;
width: 1.75em;
border-radius: 3px;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
Веб-форма
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CollegeDays.WebForm1" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> </asp:Content>
Поскольку я новичок в кодировании я получил этот код из видео на Youtube и владелец этого кода загрузил тот же код здесь.
Что я уже пробовал:
Я попытался связать JQueries с разных сайтов, но ничего не помогло.