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

  }

わかりましたので、各ボタンでこの JavaScript 機能を使用して、フォームやテキストなどを保持するドロップダウンを作成しています。1 つ (最初のボタンなど) をクリックすると、他の 2 つのボタンがその下にドロップされます。 . 最後のボタンをクリックすると、最初の 2 つのボタンが一番上に表示されます。

2 つのこと: 一度に 1 つのボタンをアクティブにできるようにしたいだけです。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 ファイルに保持します。これにより、ごちゃごちゃした HTML の行をたどることなく、UI を簡単に操作できます。
于 2012-05-27T04:15:45.357 に答える