Question

我有一个带有标题的HTML文档，当您单击它展开的标题时，当您再次单击它时它会折叠。这适用于除Firefox Mozilla之外的大多数浏览器。当我用Firefox Mozilla打开它时，标题根本不想扩展。

以下代码：

＆＃13;

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

i {
  border: solid #ffb200;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 5px;
}

.down {
  color: #ffb200;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.right {
  color: #ffb200;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}

.mainnav {
  display: none;
}

＆＃13;

<script>
  function myFunction() {
    var x = event.target.nextElementSibling,
      y = event.target.firstChild;
    if (x.style.display === 'none' || x.style.display === '') {
      x.style.display = 'block';
      y.classList.add("down");
      y.classList.remove("right");
    } else {
      x.style.display = 'none';
      y.classList.remove("down");
      y.classList.add("right");
    }
  }
</script>

<h3 class="sidebar-heading">
  <a class="sidebar-heading" href="#logins"> <u>SYSTEM LOGINS</u></a>
</h3>
<h4 onclick="myFunction(event);" class="sidebar-heading2"><i class="right" style="top:-50px"></i> Login types</h4>
<div class="mainnav">
  <nav id="mainnav">
    <ul>
      <li><a href="#Admin">login</a></li>
      <li><a href="#Student">Student login</a></li>
      <li><a href="#Guest">Guest login</a></li>
    </ul>
  </nav>
</div>

＆＃13;

请指教。谢谢

Answer 1

在您的功能中，您尝试引用传递给内联event处理程序的全局onclick参数，但您尚未将其作为函数中的参数引用。< / p>

将myFunction()更改为myFunction( e )，因为您应该引用作为参数传递给函数的任何内容。您可以使用您喜欢的任何参数名称，但要保持其描述性，以便在您在函数体中引用它时知道您正在使用的参数。 e是用于事件对象的通用名称。

有些浏览器可让您访问全局event对象，而其他浏览器则无法访问。{p>这就是为什么它适用于某些浏览器而不适用于其他浏览器的原因。

＆＃13;

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

i {
  border: solid #ffb200;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 5px;
}

.down {
  color: #ffb200;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.right {
  color: #ffb200;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}

.mainnav {
  display: none;
}

＆＃13;

<script>
  function myFunction( e ) {
  
    var x = e.target.nextElementSibling,
        y = e.target.firstChild;
        
    if ( x.style.display === 'none' || x.style.display === '' ) {
    
      x.style.display = 'block';
      
      y.classList.add( 'down' );
      y.classList.remove( 'right' );
      
    } else {
    
      x.style.display = 'none';
      
      y.classList.remove( 'down' );
      y.classList.add( 'right');
      
    }
    
  }
</script>

<h3 class="sidebar-heading">
  <a class="sidebar-heading" href="#logins"> <u>SYSTEM LOGINS</u></a>
</h3>
<h4 onclick="myFunction( event );" class="sidebar-heading2"><i class="right" style="top:-50px"></i> Login types</h4>
<div class="mainnav">
  <nav id="mainnav">
    <ul>
      <li><a href="#Admin">login</a></li>
      <li><a href="#Student">Student login</a></li>
      <li><a href="#Guest">Guest login</a></li>
    </ul>
  </nav>
</div>

＆＃13;

作为旁注，我不会内联您的事件处理程序，而是使用addEventListener。

HTML显示和隐藏在Mozilla Firefox中不起作用

1 个答案: