Question

我正在尝试隐藏聊天记录div，当隐藏时，将chatid放在64px所在的底部，但是它给我一个错误说

toggle 3();未定义

 <div id="chatdiv">
    <div id='chatid' onclick="toggle3();">
        <div id="chatname">
        </div>
     </div>
 </div>

var toggle3 = function() {
var mydiv3 = document.getElementById('chatid');
var mydiv4 = document.getElementById('chatname');
if (mydiv4.style.height === '0px' || mydiv4.style.height === '' )
mydiv4.style.height = '516px';
mydiv3.style.top = "64px"

else
mydiv4.style.height = '0px'
mydiv3.style.top = "auto"

}

Answer 1

我不确定，但似乎你想要这样做

的

<div id="chatdiv"> <div id='chatid' onclick="toggle3();" > <div id="chatname"> </div> </div> </div>

的

var toggle3 = function() 
{
console.log(this.id);
var mydiv3 = document.getElementById('chatid');
var mydiv4 = document.getElementById('chatname');
if (mydiv4.style.height === '0px' || mydiv4.style.height === '' )
{
mydiv4.style.height = '516px';
mydiv3.style.top = "64px"
}
else
{
mydiv4.style.height = '0px'
mydiv3.style.top = "auto"
}
}

javascript代码应该包含在脚本标记之外，如果if else块中有多个表达式，则必须使用代码块。

Answer 2

正如人们在你的问题评论中提到的那样，你的代码有很多语法错误，你应该能够在浏览器的控制台中看到这些错误，在这一行上它会说错误。您的代码更正确的验证如下

'use strict';
var toggle3 = function() {
  var mydiv3 = document.getElementById('chatid');
  var mydiv4 = document.getElementById('chatname');
  if (mydiv4.style.height === '0px' || mydiv4.style.height === '' ) {
    mydiv4.style.height = '516px';
    mydiv3.style.top = "64px";
  } else {
    mydiv4.style.height = '0px';
    mydiv3.style.top = "auto";
  }
}

如果if块中包含多个语句，则始终需要使用{ // code statements here ... }

在语句周围创建一个块

'use strict';
var toggle3 = function() {
  var mydiv3 = document.getElementById('chatid');
  var mydiv4 = document.getElementById('chatname');
  if (mydiv4.style.height === '0px' || mydiv4.style.height === '' ) {
    mydiv4.style.height = '516px';
    mydiv3.style.top = "64px";
  } else {
    mydiv4.style.height = '0px';
    mydiv3.style.top = "auto";
  }
}

div { padding: 5px; margin: 5px; }
#chatdiv {
  background-color: red;
}
#chatid {
  background-color: orange;
}

 <div id="chatdiv">
    <div id='chatid' onclick="toggle3();">
        <div id="chatname">
          Name
        </div>
     </div>
 </div>

但是，您需要的可能更简单吗？为什么不在父div上设置一个类并根据该父类隐藏元素？无需使用高度和其他东西，只需更改父div的类，然后生成的高度/宽度/可见性更改可以通过css更改来处理

function toggle3( sourceElement, classToToggle ) {
  var target = document.getElementById( sourceElement );
  target.classList.toggle( classToToggle );
}

function toggle3( sourceElement, classToToggle ) {
  var target = document.getElementById( sourceElement );
  target.classList.toggle( classToToggle );
}

.active-chat-box {
}
#chatid.active-chat-box {
  height: 516px;
  width: auto;
  background-color: yellow;
}
.active-chat-box > #chatname {
  background-color: orange;
}

<div id="chatdiv">
  <div id='chatid' class="active-chat-box" onclick="toggle3('chatid', 'active-chat-box');">
    <div id="chatname">
      Name
    </div>
  </div>
</div>

我的功能不起作用？

2 个答案: