我写了一个代码来通过点击“p”元素来隐藏/显示一个 div，但是第一次点击没有任何反应。
只有从第二次单击开始，代码才能按预期工作。
我读过一些类似的问题，我明白这可能是一个风格问题。
所以我尝试改变风格(并不知道自己在做什么)，但我并不幸运。
我还有另一个问题:“p”元素有时会覆盖一个输入，我不明白如何将它放在 div 的右下角但低于其他所有元素。
<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
position:relative;
display: inline-block;
width: 48%;
margin: 3px;
border: 3px solid #CCC;
}
.Class2 {
position:absolute;
bottom:0;
right:0;
border: 1px solid #CCC;
margin:1px;
background: #FFC;
}
.Fields {
clear: both;
border: 1px solid #CCC;
display: inline-block;
margin:3px;
}
.H_p {
border: 1px solid #CCC;
display: inline-block;
}
.Opt {
border: 1px solid #CCC;
display: none;
}
</style>
</head>
<body>
<h2>My test</h2>
<?php
$Divs = array('Div1'=>'Class1',
'Div2'=>'Class1',
'Div3'=>'Class1',
'Div4'=>'Class1',
'Div5'=>'Class1');
$AskToShow=array("Field1"=>"1.1.1", "Field2"=>"1.2.1", "Field3"=>"1.3.1");
foreach ($Divs as $Name=>$Class){
echo '
<div class="'.$Class.'">';
echo $Name.'<br/>';
foreach ($AskToShow as $I_Name=>$Id){
echo '
<label>'.$I_Name.'</label>
<input type="text" id="'.$Id.'" class="Fields"/>';
}
echo '
<p id="Btn_Opt'.$Name.'" class="Class2" >Mostra campi opzionali</p>';
echo '
<div id=Opt'.$Name.' name="Opt'.$Name.'" class="Opt" >';
foreach ($AskToShow as $H_Name=>$Id){
echo'
<p id="H_'.$Id.'" class="H_p">'.$H_Name.'</p>';
}
echo '
</div>';
echo '
</div>';
}
?>
<script>
var MyClass = document.getElementsByClassName("Class2");
var myFunction = function() {
var SenderId = this.id;
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
var SubSH = document.getElementById(SubId);
if (SubSH.style.display == 'none'){
SubSH.style.display = 'inline-block';
}else{
SubSH.style.display = 'none';
}
};
for (var i = 0; i < MyClass.length; i++) {
MyClass[i].addEventListener('click', myFunction, false);
}
</script>
</body>
</html>
最佳答案
问题是当你做 SubSH.style.display你只检查 inline style所以东西是客栈<your-tag style='...'/>但是您在样式表中有它，因此无法通过此方法访问它。试着稍微改变一下你的功能——例如
var myFunction = function() {
var SenderId = this.id;
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
var SubSH = document.getElementById(SubId);
var style = window.getComputedStyle(SubSH);
if (style.display == 'none'){
SubSH.style.display = 'inline-block';
}else{
SubSH.style.display = 'none';
}
};
通过使用 window.getComputedStyle(SubSH);您正在检查了解所有类和 CSS 的样式
关于javascript - Onclick javascript 函数在第一次点击时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47346164/