Question

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

  }

好吧所以我在每个按钮上使用这个javscript功能来创建一个包含表单，文本等的下拉菜单，当我点击一个（例如第一个）然后当它掉落时，另外两个按钮低于它。如果我点击最后一个，那么前两个按钮就会保持在最顶层。

2件事：我只想要一个按钮才能一次激活。我希望所有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 />

Answer 1

重新排序元素可以提供帮助：

<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的行。

3个按钮，我希望其他2个在单击1处于活动状态时保持不活动状态

1 个答案: