Не убирается класс у svg элемента
Смотрите, я хочу чтобы при изменении ширины экрана у меню убирался класс actived, точнее у svg элемента. Но он не срабатывает. Всё убирается кроме actived класс. Подскажите ошибку.
$(document).ready(function() {
function checkWidth() {
var windowWidth = $('body').innerWidth(),
list = $(".menu-list");
desc = $(".description");
mbtn = $(".menu-toggle button svg");
if (windowWidth > 991) {
list.removeClass('show transf');
desc.removeClass('desc-fix');
mbtn.remove('actived');
} else {}
}
checkWidth();
$(window).resize(function() {
checkWidth();
});
});
.menu-toggle {
display: none;
position: relative;
z-index: 1000;
}
.menu-toggle button {
border: 0;
background: none;
margin: 0 auto;
margin-top: 6px;
}
.ham {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 400ms;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
float: right;
margin-top: -20px;
}
.hamRotate.actived {
transform: rotate(45deg);
}
.hamRotate180.actived {
transform: rotate(180deg);
}
.line {
fill: none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke: #000;
stroke-width: 5.5;
stroke-linecap: round;
}
.ham1 .top {
stroke-dasharray: 40 139;
}
.ham1 .bottom {
stroke-dasharray: 40 180;
}
.ham1.actived .top {
stroke-dashoffset: -98px;
}
.ham1.actived .bottom {
stroke-dashoffset: -138px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-toggle text-right">
<button id="menu-toggle">
<svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="this.classList.toggle('actived')">
<path class="line top"
d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" fill="#1a1a1a" />
<path class="line middle"
d="m 30,50 h 40" fill="#1a1a1a" />
<path class="line bottom"
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" fill="#1a1a1a" />
</svg>
</button>
</div>
$('.menu-toggle button svg').click(function (e) {
e.preventDefault();
$('.menu-list').toggleClass('show transf');
$('.description').toggleClass('desc-fix');
$('.menu-toggle button svg').toggleClass('actived');
});
$(document).ready(function() {
function checkWidth() {
var windowWidth = $('body').innerWidth(),
list = $(".menu-list");
desc = $(".description");
mbtn = $(".menu-toggle button svg");
if(windowWidth > 991){
list.removeClass('show transf');
desc.removeClass('desc-fix');
mbtn.removeClass('actived');
}
else {
}
}
checkWidth();
$(window).resize(function(){
checkWidth();
});
});
#header {
padding-top: 30px;
}
.menu ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-left: 23px;
margin-top: 4px;
}
.menu ul li {
margin-right: 40px;
}
.menu ul li:last-child {
margin-right: 0px;
}
.menu ul li a {
font-size: 18px;
color: #b4b4b4;
font-family: "Europe", sans-serif;
}
.menu ul li a:hover {
color: #1a1a1a;
}
.logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.logo p {
font-size: 25px;
text-transform: uppercase;
font-family: "Colus", sans-serif;
margin: 0 auto;
display: block;
cursor: pointer;
}
.logo p::after {
content: '';
display: block;
background: #1a1a1a;
height: 1px;
margin-left: 4.5px;
width: 18px;
margin-top: -8px;
}
.search {
margin-top: 2px;
text-align: right;
}
.search input {
width: 80%;
background: #eeeeee;
border: 1px solid #eeeeee;
border-radius: 10px;
font-size: 13px;
padding: 1px 30px 1px 20px;
position: relative;
}
.search input::-webkit-input-placeholder {
color: #bcbcbc;
font-style: italic;
}
.search input:-ms-input-placeholder {
color: #bcbcbc;
font-style: italic;
}
.search input::-ms-input-placeholder {
color: #bcbcbc;
font-style: italic;
}
.search input::placeholder {
color: #bcbcbc;
font-style: italic;
}
.search button {
border: 0;
background: transparent;
font-size: 11px;
color: #aaaaaa;
position: absolute;
top: 7px;
right: 5.5%;
}
.description {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.description h1 {
font-size: 25px;
text-transform: uppercase;
width: 80%;
margin: 0 auto;
line-height: 1.25em;
}
.menu-toggle {
display: block;
position: relative;
z-index: 1000;
}
.menu-toggle button {
border: 0;
background: none;
margin: 0 auto;
margin-top: 6px;
}
.ham {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
float: right;
margin-top: -20px;
}
.hamRotate.actived {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.hamRotate180.actived {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.line {
fill: none;
-webkit-transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke: #000;
stroke-width: 5.5;
stroke-linecap: round;
}
.ham1 .top {
stroke-dasharray: 40 139;
}
.ham1 .bottom {
stroke-dasharray: 40 180;
}
.ham1.actived .top {
stroke-dashoffset: -98px;
}
.ham1.actived .bottom {
stroke-dashoffset: -138px;
}
.menu-list {
background: #1a1a1a;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.menu-list ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-top: 30px;
padding-bottom: 20px;
}
.menu-list ul li {
margin: 0 auto;
margin-bottom: 15px;
}
.menu-list ul li:last-child {
margin-bottom: 0;
}
.menu-list ul li a {
color: #fff;
font-size: 16.5px;
text-transform: uppercase;
}
<header id="header">
<div class="nav">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 d-md-none d-xl-block d-lg-block d-sm-none d-none">
<nav class="menu">
<ul>
<li>
<a href="index.html">
test
</a>
</li>
<li>
<a href="page-proofs.html">
test
</a>
</li>
<li>
<a href="contacts.html#contacts">
test
</a>
</li>
</ul>
</nav>
</div>
<div class="col-xl-4 col-lg-4 col-md-3 col-sm-3 col-4">
<div class="logo">
<p>
<a href="#">
test
</a>
</p>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-7 col-sm-7 col-5">
<div class="search">
<input type="text" name="search" placeholder="Поиск" required>
<button type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="d-lg-none d-xl-none col-md-2 col-sm-2 d-md-block col-3">
<div class="menu-toggle text-right">
<button id="menu-toggle">
<svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="this.classList.toggle('actived')">
<path class="line top"
d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" fill="#1a1a1a" />
<path class="line middle"
d="m 30,50 h 40" fill="#1a1a1a" />
<path class="line bottom"
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" fill="#1a1a1a" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="menu-list">
<ul>
<li>
<a href="index.html">
test
</a>
</li>
<li>
<a href="page-proofs.html">
test
</a>
</li>
<li>
<a href="contacts.html#contacts">
test
</a>
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
Ответы (1 шт):
Автор решения: Grundy
→ Ссылка
Проблема в строке mbtn.remove('actived');.
В данном случае идет попытка удалить элемент <actived> из набора, в котором только svg элемент.
Если заменить этот код, на тот, который используется для остальных классов
mbtn.removeClass('actived');
Все начинает работать так, как и ожидалось.
В сниппете по кнопке развернуть можно увидеть, что условие отрабатывает, класс убирается, и крестик меняется на гамбургер
$(document).ready(function() {
function checkWidth() {
var windowWidth = $('body').innerWidth(),
list = $(".menu-list");
desc = $(".description");
mbtn = $(".menu-toggle button svg");
console.log('resize', windowWidth);
if (windowWidth > 991) {
list.removeClass('show transf');
desc.removeClass('desc-fix');
mbtn.removeClass('actived');
} else {}
}
checkWidth();
$(window).resize(function() {
checkWidth();
});
});
.menu-toggle {
position: relative;
z-index: 1000;
}
.menu-toggle button {
border: 0;
background: none;
margin: 0 auto;
margin-top: 6px;
}
.ham {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 400ms;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
float: right;
margin-top: -20px;
}
.hamRotate.actived {
transform: rotate(45deg);
}
.hamRotate180.actived {
transform: rotate(180deg);
}
.line {
fill: none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke: #000;
stroke-width: 5.5;
stroke-linecap: round;
}
.ham1 .top {
stroke-dasharray: 40 139;
}
.ham1 .bottom {
stroke-dasharray: 40 180;
}
.ham1.actived .top {
stroke-dashoffset: -98px;
}
.ham1.actived .bottom {
stroke-dashoffset: -138px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-toggle text-right">
<button id="menu-toggle">
<svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="this.classList.toggle('actived')">
<path class="line top"
d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" fill="#1a1a1a" />
<path class="line middle"
d="m 30,50 h 40" fill="#1a1a1a" />
<path class="line bottom"
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" fill="#1a1a1a" />
</svg>
</button>
</div>