时间戳

首页 > 解决方案 > if class contains class ___ then remove text between

javascript - if class contains class ___ then remove text between

问题描述

I want to remove text between <a href="#" class="main_navigation-mobile-logo">text</a> when in <ul class="main_navigation-menu js-main_navigation-menu"> will be toggled class .main_navigation-menu--open so when it will be looking like this there: <ul class="main_navigation-menu js-main_navigation-menu main_navigation-menu--open"> i want to delete that text between a (it displays only in 991px max width)

JS:

const menuMobile = document.querySelector(".js-main_navigation-menu");

function myFunction(x, y) {
    if (x.matches && y.matches) {
        $('.main_navigation-mobile-logo').html('');
    }
}

var x = window.matchMedia("(max-width: 991px)");
var y = menuMobile.classList.contains("main_navigation-menu--open");

myFunction(x, y);
x.addEventListener(myFunction);
y.addEventListener(myFunction);

HTML:

<ul class="main_navigation-menu js-main_navigation-menu">
                <li>...</li>
               <button>...</button>
            </ul>
            <a href="#" class="main_navigation-mobile-logo">text</a>

Whats wrong with the code? It does not work.

标签： javascript

解决方案

CSS：

@media (max-width: 991px) {
    .main_navigation-menu--open + a { //select the adjacent sibling
      font-size: 0; 
    }
}

所以当它打开时文本消失

推荐阅读