下拉菜单的标题中不应显示背景图像

Question

我做了一个JavaScript下拉菜单。 除了背景图片，其他所有东西都可以正常工作。 下拉菜单展开后，我将图像设置为更改，这也可以正常工作。

问题在于标题。 除非标题设置为显示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并更改类名。 我已经调整了您的expandOrCollapse函数，使其根据id为“ header”的div中的类名进行切换。

例如：

 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> 

Answer 2

如下所示编辑h2的声明块。 这样可以解决您的问题。

h2 {
    display: inline-block;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;   // this line solves your problem.
}

CSS属性pointer-events使您可以控制元素在什么情况下可以成为鼠标事件的目标。 当您将其设置为none ，该元素将永远不是鼠标事件的目标。 因此，click事件传递到其后代元素（在此为框）。