0 
function toggleSlideBox(x) {
        $("#"+x).slideToggle(300);

  }

好的，所以我在每个按钮上使用这个 javscript 功能来创建一个包含表单、文本等的下拉菜单，当我单击一个（例如第一个）然后当它下降时，其他两个按钮下降到它下面. 如果我单击最后一个，那么前两个按钮将保持在顶部。

两件事：我只希望一个按钮能够一次处于活动状态。我希望所有 3 个按钮都保持在顶部

这是其余的帮助代码：

<a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox('three');"><input name="#" type="button" id="#" value="Ask"></input></a>
<div id="three" style="background-color:#06A1F1; border:#999 1px solid; padding:12px; display:none; margin-top:8px;">
                <textarea name="#" cols="80px" rows="3" style="resize: none;" onfocus="if(this.value==this.defaultValue) this.value='';">Content</textarea>
                <br />
                <input style="float:right; margin-right:80px;" type="button" value="Post!"></input>
                <br />
</div>
                <a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox('two');"><input name="#" type="button" id="#" value="Post!"></input></a>
<div id="two" style="background-color:#06A1F1; border:#999 1px solid; padding:12px; display:none; margin-top:8px;">
                <textarea name="#" cols="15px" rows="1" style="resize: none;" onfocus="if(this.value==this.defaultValue) this.value='';">Title</textarea>
                <textarea name="#" cols="80px" rows="3" style="resize: none;" onfocus="if(this.value==this.defaultValue) this.value='';">Content</textarea>
                <br />
                <input style="float:right; margin-right:80px;" type="button" value="Post!"></input>
                <br />
</div>
                <a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox('one');"><input name="#" type="button" id="#" value="Write!"></input></a>
<div id="one" style="background-color:#06A1F1; border:#999 1px solid; padding:12px; display:none; margin-top:8px;">
                <textarea name="#" cols="15px" rows="1" style="resize: none;" onfocus="if(this.value==this.defaultValue) this.value='';">Title</textarea>
                <textarea name="#" cols="80px" rows="3" style="resize: none;" onfocus="if(this.value==this.defaultValue) this.value='';">Content</textarea>
                <br />
                <input style="float:right; margin-right:80px;" type="button" value="Post!"></input>
                <br />
4

1 回答 1

0

重新排序元素可以帮助：

<a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox('three');"><input name="#" type="button" id="#" value="Ask"></input></a>
<a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox('two');"><input name="#" type="button" id="#" value="Post!"></input></a>
<a href="#" onclick="return false" onmousedown="javascript:toggleSlideBox('one');"><input name="#" type="button" id="#" value="Write!"></input></a>
<div id="three" style="background-color:#06A1F1; border:#999 1px solid; padding:12px; display:none; margin-top:8px;">
                <textarea name="#" cols="80px" rows="3" style="resize: none;" onfocus="if(this.value==this.defaultValue) this.value='';">Content</textarea>
                <br />
                <input style="float:right; margin-right:80px;" type="button" value="Post!"></input>
                <br />
</div>
<div id="two" style="background-color:#06A1F1; border:#999 1px solid; padding:12px; display:none; margin-top:8px;">
                <textarea name="#" cols="15px" rows="1" style="resize: none;" onfocus="if(this.value==this.defaultValue) this.value='';">Title</textarea>
                <textarea name="#" cols="80px" rows="3" style="resize: none;" onfocus="if(this.value==this.defaultValue) this.value='';">Content</textarea>
                <br />
                <input style="float:right; margin-right:80px;" type="button" value="Post!"></input>
                <br />
</div>
<div id="one" style="background-color:#06A1F1; border:#999 1px solid; padding:12px; display:none; margin-top:8px;">
                <textarea name="#" cols="15px" rows="1" style="resize: none;" onfocus="if(this.value==this.defaultValue) this.value='';">Title</textarea>
                <textarea name="#" cols="80px" rows="3" style="resize: none;" onfocus="if(this.value==this.defaultValue) this.value='';">Content</textarea>
                <br />
                <input style="float:right; margin-right:80px;" type="button" value="Post!"></input>
                <br />
  • 请尽量将 UI 与 JS 逻辑分开。也许您可以将所有 JS 放在一个单独的文件中。
  • 将样式保存在不同的 CSS 文件中。这将帮助您轻松操作 UI，而无需通过混合的 HTML 行。
于 2012-05-27T04:15:45.357 回答