Question

帮我解决脚本问题当我在全屏幕上打开我的文件（超过768px）时，我将指针移动到徽标div上，没有任何反应，但是当我将浏览器调整到768px以下并再次调整大小到768px以上并尝试将我的指针移动到徽标div上时我所做的<a>元素一直在显示......这不应该发生

HTML

<div id="header">
    <div id="logo">
        <a id="aLogo" href="#"></a>
    </div>
    <div class="hide" id="navigation">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Examples</a></li>
            <li><a href="#">Form</a></li>
            <li><a href="#">Contact</a></li>
      </ul>
  </div>
</div>

的JavaScript

var headDiv = document.getElementById('header');
var logoDiv = document.getElementById('logo');
var naviDiv = document.getElementById('navigation');
var aLogo = document.getElementById('aLogo');
var ulNav = naviDiv.childNodes[1];
var x = window.matchMedia("(max-width: 768px)");
/*create <a> tag starts*/
      var aHome = document.createElement('a');
      aHome.appendChild(document.createTextNode("Home"));
      aHome.setAttribute("href","#header");
      var newLi = document.createElement('li');
      newLi.appendChild(aHome);
/*ends*/      
function showobj (e){//show object and add <a> tag to HTMl
    naviDiv.classList.remove('hide');
    naviDiv.classList.add('show');
    ulNav.insertBefore(newLi,ulNav.childNodes[1]);
}
function hideobj (e){//hide object and remove <a> tag from HTML
    ulNav.removeChild(ulNav.childNodes[1]);
    naviDiv.classList.remove('show');
    naviDiv.classList.add('hide');
}
function mediaQuery(x) {//Minimize navbar if screen under 768px
  "use strict";
    if (x.matches) {
      logoDiv.addEventListener("mouseover", showobj);
      naviDiv.addEventListener("mouseleave", hideobj);
      aLogo.addEventListener("click", function(e){e.preventDefault();});//removes "a" fucntion
  }
}
mediaQuery(x);
x.addListener(mediaQuery);

https://jsfiddle.net/vwbo9exg/8/

Answer 1

创建aHome元素时，您可以为其指定ID。

aHome.setAttribute("id","homeA");

如果屏幕尺寸超过769px

，则隐藏它

@media (min-width:769px) { /*if screen over 768px*/
    #homeA {
        display: none !important;
    }
}

这应该回答你的问题。但是你有另一个非常致命的错误。当您将屏幕大小调整为超过769px时，您必须删除元素上的侦听器

function mediaQuery(x) {//Minimize navbar if screen under 768px
    "use strict";
    if (x.matches) {
        logoDiv.addEventListener("mouseover", showobj);
        naviDiv.addEventListener("mouseleave", hideobj);
        aLogo.addEventListener("click", function(e){e.preventDefault();});//removes "a" fucntion
    }else{
        logoDiv.removeEventListener("mouseover", showobj);
        naviDiv.removeEventListener("mouseleave", hideobj);
        aLogo.removeEventListener("click", function(e){e.preventDefault();});
    }
}

如果您没有，只要您将鼠标悬停在naviDiv

上，就会一次删除一个列表项

我希望能帮助你。

删除HTML元素

1 个答案: