2016-07-17 10 views
0

私はWebベースの電子メールクライアントを構築しています。ユーザーがクリックすると、divを切り替えるボタンを追加したいと思います。ボタンを使用する正しい方法bootstrap toggle div

は私が持っている:

<a href='#rply' class='btn btn-default btn-xs pull-right' data-toggle='collapse'>Reply</a> 

<div id="rply" class="collapse"> 
... 
</div> 
取り組んでいる

が、私はそれがまだ示されていない場合、私は新しい電子メールを作成するための機能を追加できるように、DIVを表示するボタンにしたい、ただ返信ありません電子メールに。

ボタンのコードは次のとおりです。

NEW: <button type="button" id="0:0" name="new_email" class="new_email btn btn-success btn-xs" title="Create a new email!"><span class="el el-icon-file-new"></span></button> 

そして、それを処理するコードは次のとおりです。

$('.new_email').on('click', function() { 
     OpenEmail(0); 

    if(! $("#rply").hasClass("in")){ 
     $('#rply').toggle(); 
    } 
}); 

これは私がdiv要素を非表示にするHREFを使用している場合、しかし、働き、その後、上のクリックボタンをもう一度表示すると、divの内容を表示するバグがありますが、divの背景は表示されません。背景が表示されていない、白く表示されていない。

ボタンを使ってdivを表示する正しい方法は何ですか?

編集:

デフォルトでは返信divは表示されません。シーケンスは、私が電子メールのリストを提供し、ユーザーがそれをクリックして表示されるということです。彼らが返信したいと決めたら、divをトグルするhrefリンクをクリックします。彼らはむしろ新しい電子メールを作成すると決めたら、ボタンをクリックします。返信divがすでに表示されている場合は、それが非表示になります。これは、ボタンのコードを実行するだけで回避しようとしているものです返信divが表示されていない場合あなたはそれをスタイルすることができます

+0

? –

+0

idk、data-toggle = 'collapse'によって追加されます – user3633383

+0

これは理解しにくいので、これを修正したいと思いますか?私は別の例を作成する場合、それはfynですか? – Iceman

答えて

2

しかし、あなたは、ブートストラップやCSSを使用したいが、ベアボーンのコンセプトは、のようになります。「の」クラスのスタイルが何であるかを

$('#mail_type').toggle(); 
 
$("#compose_btn").click(function() { 
 
    $('#mail_type').toggle(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="compose_btn">COMPOSE MAIL</button> 
 
<div contenteditable="true" id="mail_type">TYPE MAIL HERE</div>

関連する問題