Question

我正在构建一个基于Web的电子邮件客户端。我想添加一个按钮，用于在用户点击它时切换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();
    }
 } );

但是，如果我使用href隐藏div，然后单击按钮再次显示它，有一个错误显示div的内容，但不显示div的背景。背景未显示，此时失败，显示白色。

使用按钮显示div的正确方法是什么？

编辑：

默认情况下，回复div不可见。顺序是我提供了一个电子邮件列表，用户可以单击一个，它将显示。如果他们决定要回复，他们会点击切换div的href链接。如果他们然后决定他们宁愿创建一个新的电子邮件，他们点击按钮，如果回复div已经可见，它将被隐藏，这是我试图通过只运行按钮的代码来避免如果回复div不可见。

Answer 1

你可以使用bootstrap或css来设置它的样式，但是准系统概念可能是这样的：

＆＃13;

$('#mail_type').toggle();
$("#compose_btn").click(function() {
  $('#mail_type').toggle();
});

＆＃13;

<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>

＆＃13;

正确的方法来使用按钮bootstrap切换div

1 个答案: