Question

*我讨厌不断提出问题，但我对Javascript感到非常恐怖，尽管我已经上了几堂课。我有一个带有两个div的网页，我只想在观看者点击按钮时显示。 div里面是一个关闭按钮。我不想切换到其他灯箱的东西或完全改变它。我开始是某种方式，然后有人将Javascript更改为另一种方法，以便它们不会相互重叠。

这是编码：*

第一个DIV +按钮

<div id="nodate" style="display:none"><span class="A"> <input type="image" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/close-icon.png?1384992227202" width="42" onclick="collapse.call(this);" /></span><b>There are no reservations listed under the date you selected. </b>Please select another date or ask for assistance.
<br>
<br>
<image style="border:2px solid #000" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/shutterstock_9121894.jpg?1385086331177" width="200" />
</div>
<input type="submit" style="background-color: #E0E0E0; padding: 4px; border: solid 2px #000; cursor:pointer; margin: 2px; border-radius: 10px;" value="Friday November 22nd, 2013" onclick="toggle.call(this);"></input>

第二个DIV +按钮（包含更多内容）

<br>
<br>
<div id="nodate2" style="display:none"><span class="A"> <input type="image" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/close-icon.png?1384992227202" width="42" onclick="collapse.call(this);" /></span><h2>Cool! We’ve got reservations for the date you selected. </h2>

<u>Your name must use a proper format or you will receive a notice that your reservation could not be found.</u>

<ul>
    <li>&bull; Both First &amp; Last</li>
    <li>&bull; First &amp; Last name must have first letter capitalized</li>
    <li>&bull; Single space between first &amp; last name</li>
</ul>Ex: Austin Block
<br><br>
<left>
<b>Input Your Name</b><br>
<form name="login" style="margin: 0px">
<INPUT TYPE="text" NAME="pass" size="17" onKeyDown="if(event.keyCode==13) event.keyCode=9;" style="width: 152px; margin: 5px;"><br>
<input type="button" value="Click to Continue" style="width : 150px; margin: 3px" onClick="TheLogin(this.form)">
</form><font color="red">(You MUST use the button. Return key will NOT work.)</font>
</center>
<br>
<br>
<image style="border:2px solid #000" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/reservations2.jpg?1385069953644" width="200" />
</div>

<input type="submit" style="background-color: #E0E0E0; padding: 4px; border: solid 2px #000; cursor:pointer; margin: 2px;  border-radius: 10px;" value="Saturday November 23rd, 2013" onclick="toggle.call(this);"></input>

JAVASCRIPT

<script>
var toggle = function () {
var mydiv =this.previousElementSibling;
mydiv.style.display = (mydiv.style.display || 'block') === "block" ? 'none' :'block'
}
var collapse = function(){
this.parentElement.parentElement.style.display = 'none';
}
</script>

我没有包含CSS。 需要什么是将Javascript分配给特定元素而不是现在的元素。我也不完全理解它当前是如何工作的，但我理解的方式是它只是在打开按钮之前影响元素/ div。我需要解决这个问题的原因是因为当我把它放在一个表中时它将div（应该是绝对的）移动到表结束的位置。我不知道为什么，也许还有其他原因导致它，但非常感谢任何帮助。

Answer 1

试试这个：

<script>
        var activeDiv ="";
        var toggle = function () {
            var mydiv = this.previousElementSibling;
            mydiv.style.display = (mydiv.style.display || 'block') === "block" ? 'none' : 'block'
            if( (activeDiv != mydiv.id)&& (activeDiv!=""))
                collapse(activeDiv);
            activeDiv = mydiv.id;
        }
        var collapse = function (id) {
            var activeDiv = document.getElementById(id);
            activeDiv.style.display = 'none';
        }
</script>

Javascript或HTML / CSS浮动div问题，也许是其他问题

1 个答案: