javascript - 背景图像不应出现在下拉菜单的标题中

Question

我制作了一个 JavaScript 下拉菜单。一切正常，除了背景图像。我将图像设置为在展开下拉菜单时更改，这也可以正常工作。

问题出在 header 上。除非标题设置为显示 inline-block 或 inline，否则菜单不会展开。当设置为 inline-block 或 inline 时，当您单击该框时，所有内容都会展开。但是，如果您单击页眉本身，它会在页眉周围添加填充和边框，并在 div 的背景图片中添加广告。你如何防止这种情况发生？

<div class="panel">
 <div class="collapse"><h2>Features</h2></div>
 <div class="elements">
  text<br>text<br>text
 </div>
</div>

<style>
h2 {/*display: inline-block;*/
    /*display: inline;*/
    margin: 0px;
    padding: 0px 0px 0px 0px;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;}

.expand,
.collapse {cursor: pointer;
           background-position: center right;
           background-repeat: no-repeat;
           background-color: #000033;
           border: 2px solid #990044;
           color: #ffffff;
           padding: 10px 0px;
           text-align: center;}

.collapse {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABHUlEQVRIS+3USw6CMBAA0BYNutOjcAQ9iXHjhoXhBt4AEmwwbvQm6g04ii4hCLaNNRUp/dDgQllRPvMy05lC0PMFe/bAH7Re8R8qaYySTZGPoyBYXm3WMQwP04Gbhfd8FJDYtKTxNjkCCBf4Ni3y0dwWSrChm51wXI/FhjHaRXix5rKygtYwGr4C1QUitPdKUJ7xemILbcJw7JsDnBktqU20DfP9VfoaCxuoDCPJvc1hF1QF+wBNy6uKNYK6qA4mBFVRXawVlKHkPTfUbKJo65NuFJ1W0sNb1EjPgOQEUcakGbJIApRPQpoZ+1iaoQKqjCln2IJqYdpgrZGArEGaGke5pPzPZE/Juq0bjbtU9KPpc6MMTTGjPeyCfQV8AK4c2lwJRjQ3AAAAAElFTkSuQmCC);}

.expand {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABD0lEQVRIS+3Wyw2CQBAG4F1Q8KadSAnYgR0YL164SCWYKDHxonZgB1ICdiI3QR6yCgSVXXaAkGDkwgXyZf6dYcCo5Qu37KFugIaxH5FkdH1+hSYErpBgPck9E8j35AkUBYE5TEkqs6EoN1iApWmCUC6QgYHRUpCCOYk0zDUNV6VMkIYJSFAJFKLQim8glAqyME1b2AQ0zZ0CRQtBHiyNEop+gRCsCvoGVsGgaAbWwSDoE2wC40VxkxgPiteb7QFhPMsNsEPmLG196DZgolF0fFXYd614M47jhxvBCtEIXfy7rGZnKEq3k4jEZd3KPhMhcxqgYBV4gylZZaXf0qqR0t77g00n2pG/tjpl/37TPACe/d8VUJ3+EgAAAABJRU5ErkJggg==);}

.elements {background-color: #ccd9ff;
           overflow: hidden;}
</style>

<script>
function aaManageEvent (eventObj, event, eventHandler) {
 if (eventObj.addEventListener) {eventObj.addEventListener (event, eventHandler, false);}
 else if (eventObj.attachEvent) {event = "on" + event; eventObj.attachEvent (event, eventHandler);}
}
window.onload = function () {
 var divs = document.getElementsByTagName ("div");
 for (var i = 0; i < divs.length; i++) {
  if (divs[i].className == "collapse") {
   aaManageEvent (divs [i], "click", spring.expandOrCollapse);
  }
  else if (divs[i].className == "elements") {
   var height = divs [i].offsetHeight;
   divs [i] .height = height;
   if (divs [i] .id == "") divs [i].id = "div" + i;
   divs [i].style.height = "0";
  }
 }
}
var spring = {
 // adjust height
 adjustItem : function (val, newItem) {
  document.getElementById (newItem).style.height = val + "px";
 },
 // check if expand or collapse
 expandOrCollapse : function (evnt) {
  evnt = evnt ? evnt : window.event;
  var target = evnt.target ? evnt.target : evnt.srcElement;
  if (target.className == "collapse") spring.expand (target);
  else spring.collapse (target);
 },
 // Expand Panel
 expand : function (target) {
  target.className = 'expand';
  var children = target.parentNode.childNodes, panel;
  for (var i = 0; i < children.length; i++) {
   if (children [i].className == "elements") {
    panel = children [i]; break;
   }
  }
  var height = panel.height, incr = height / 20;
  for (var i=0; i < 20; i++) {
   var val = (i + 1) * incr;
   var func = "spring.adjustItem (" + val + ", '" + panel.id + "')";
   setTimeout (func, (i + 1) * 30);
  }
 },
 // Collapse Panel
 collapse : function (target) {
  target.className = "collapse";
  var children = target.parentNode.childNodes, panel;
  for (var i = 0; i < children.length; i++) {
   if (children [i].className == "elements") {
    panel = children [i]; break;
   }
  }
  var height = panel.height, decr = height / 20;
  for (var i = 0; i < 20; i++) {
   var val = height - (decr * (i + 1));;
   var func = "spring.adjustItem (" + val + ", '" + panel.id + "')";
   setTimeout (func, (i + 1) * 30);
  }
 }
};
</script>

Answer 1

当我点击 div 时，下拉菜单有效。但是当我点击标题时，我在浏览器控制台中看到错误。

我想是因为当点击 <h2>Features</h2>元素，点击事件冒泡到 <div class="collapse"> , 使得 var target在这一行中不是 <div class="collapse">但是 <h2> :

var target = evnt.target ? evnt.target : evnt.srcElement;

解决这个问题的一个可能的解决方案是例如向此行添加一个 id:

<div id="header" class="collapse"><h2>Features</h2></div>

然后就可以直接通过id获取那个div，改classname了。我已经调整了你的expandOrCollapse函数使其根据 div 中带有 id="header"的类名进行切换。

例如:

function aaManageEvent (eventObj, event, eventHandler) {
 if (eventObj.addEventListener) {eventObj.addEventListener (event, eventHandler, false);}
 else if (eventObj.attachEvent) {event = "on" + event; eventObj.attachEvent (event, eventHandler);}
}
window.onload = function () {
 var divs = document.getElementsByTagName ("div");
 for (var i = 0; i < divs.length; i++) {
  if (divs[i].className == "collapse") {
   aaManageEvent (divs [i], "click", spring.expandOrCollapse);
  }
  else if (divs[i].className == "elements") {
   var height = divs [i].offsetHeight;
   divs [i] .height = height;
   if (divs [i] .id == "") divs [i].id = "div" + i;
   divs [i].style.height = "0";
  }
 }
}
var spring = {
 // adjust height
 adjustItem : function (val, newItem) {
  document.getElementById (newItem).style.height = val + "px";
 },
 // check if expand or collapse
 expandOrCollapse : function (evnt) {
  var header = document.getElementById('header');
  if (header.className === "collapse") {
    spring.expand(header);
  } else {
    spring.collapse(header);
  }
 },
 // Expand Panel
 expand : function (target) {
  target.className = 'expand';
  var children = target.parentNode.childNodes, panel;
  for (var i = 0; i < children.length; i++) {
   if (children [i].className == "elements") {
    panel = children [i]; break;
   }
  }
  var height = panel.height, incr = height / 20;
  for (var i=0; i < 20; i++) {
   var val = (i + 1) * incr;
   var func = "spring.adjustItem (" + val + ", '" + panel.id + "')";
   setTimeout (func, (i + 1) * 30);
  }
 },
 // Collapse Panel
 collapse : function (target) {
  target.className = "collapse";
  var children = target.parentNode.childNodes, panel;
  for (var i = 0; i < children.length; i++) {
   if (children [i].className == "elements") {
    panel = children [i]; break;
   }
  }
  var height = panel.height, decr = height / 20;
  for (var i = 0; i < 20; i++) {
   var val = height - (decr * (i + 1));;
   var func = "spring.adjustItem (" + val + ", '" + panel.id + "')";
   setTimeout (func, (i + 1) * 30);
  }
 }
};

h2 {/*display: inline-block;*/
    /*display: inline;*/
    margin: 0px;
    padding: 0px 0px 0px 0px;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;}

.expand,
.collapse {cursor: pointer;
           background-position: center right;
           background-repeat: no-repeat;
           background-color: #000033;
           border: 2px solid #990044;
           color: #ffffff;
           padding: 10px 0px;
           text-align: center;}

.collapse {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABHUlEQVRIS+3USw6CMBAA0BYNutOjcAQ9iXHjhoXhBt4AEmwwbvQm6g04ii4hCLaNNRUp/dDgQllRPvMy05lC0PMFe/bAH7Re8R8qaYySTZGPoyBYXm3WMQwP04Gbhfd8FJDYtKTxNjkCCBf4Ni3y0dwWSrChm51wXI/FhjHaRXix5rKygtYwGr4C1QUitPdKUJ7xemILbcJw7JsDnBktqU20DfP9VfoaCxuoDCPJvc1hF1QF+wBNy6uKNYK6qA4mBFVRXawVlKHkPTfUbKJo65NuFJ1W0sNb1EjPgOQEUcakGbJIApRPQpoZ+1iaoQKqjCln2IJqYdpgrZGArEGaGke5pPzPZE/Juq0bjbtU9KPpc6MMTTGjPeyCfQV8AK4c2lwJRjQ3AAAAAElFTkSuQmCC);}

.expand {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABD0lEQVRIS+3Wyw2CQBAG4F1Q8KadSAnYgR0YL164SCWYKDHxonZgB1ICdiI3QR6yCgSVXXaAkGDkwgXyZf6dYcCo5Qu37KFugIaxH5FkdH1+hSYErpBgPck9E8j35AkUBYE5TEkqs6EoN1iApWmCUC6QgYHRUpCCOYk0zDUNV6VMkIYJSFAJFKLQim8glAqyME1b2AQ0zZ0CRQtBHiyNEop+gRCsCvoGVsGgaAbWwSDoE2wC40VxkxgPiteb7QFhPMsNsEPmLG196DZgolF0fFXYd614M47jhxvBCtEIXfy7rGZnKEq3k4jEZd3KPhMhcxqgYBV4gylZZaXf0qqR0t77g00n2pG/tjpl/37TPACe/d8VUJ3+EgAAAABJRU5ErkJggg==);}

.elements {background-color: #ccd9ff;
           overflow: hidden;}

<div class="panel">
 <div id="header" class="collapse"><h2>Features</h2></div>
 <div class="elements">
  text<br>text<br>text
 </div>
</div>