设计类似 GMail 的收件人文本框答案

【问题标题】：Designing GMail like recipient text box设计类似 GMail 的收件人文本框
【发布时间】：2017-08-24 02:49:48
【问题描述】：

有没有办法设计像 gmail 界面一样的收件人文本框，点击它会显示抄送、密送字段，点击密送或抄送时它们会进一步展开。我对电子邮件使用了 jquery autocomplete multiple。但如何继续？

   <tr>
      <td colspan="3"  class="nopadding">
         <input class="" type="text" id="recipients" placeholder="Recipients"/>
      </td>
   </tr>
   <tr>
      <td colspan="3"  class="nopadding">
         <input type="text" id="subject" placeholder="Subject"/>
      </td>
   </tr>
   <tr>
      <td colspan="3"  class="nopadding">
         <textarea rows="4" id="body" placeholder="Compose" ></textarea>
      </td>
   </tr>

【问题讨论】：

请带上tour，看看周围，通读help center，尤其是How do I ask a good question?，努力解决问题。如果您在这样做时遇到了特定问题，请在您的尝试中发布一个问题（使用 jQuery 的 JavaScript 代码），说明什么不起作用，并解释您迄今为止的研究。
用代码完成。

标签： jquery html css user-interface jquery-ui

【解决方案1】：

<html>
<head>
<style>
    .hidden{
        display:none;
    }
    .mailBox {
        border: 1px solid #ccc;
        margin: 0px;
        padding: 0px;
        height: auto;
        width: 400px;
    }
    .mailBox a {
        cursor: pointer;
    }
    .mailRecipients {
        height: auto;
    }
    .mailElem a {
        color: #ccc;
        text-decoration: none;
        margin-left: 10px;
        font-size: 16px;
        font-family: monospace;
    }
    .mailElem {
        border-bottom: 1px solid #ccc;
    }
    .mailElemCnt {
        display: inline-block;
    }
    .mailElemContExpand {
        float: right;
        margin-right: 10px;
        margin-top: 7px;
    }
    .mailElemCntA, .mailElemCntLbl{
        width: 75px;
    }
    .mailElemCnt input {
        width: 240px;
        padding: 10px 0px;
        border: none;
    }
    .mailElemCnt label{
        color: #ccc;
        text-decoration: none;
        margin-left: 10px;
        font-size: 16px;
        font-family: monospace;
    }
    .mailBody {
        width: 400px;
        height: 250px;
        border: none;
        border-bottom: 1px solid #ccc;
    }
    .mailboxBottom input[type=button] {
        padding: 10px 25px;
        background-color: #2196F3;
        color: white;
        border: none;
    }
</style>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" ></script>
    <div class="mailBox">
        <div class="mailRecipients">
            <div class="mailElem">
                <div class="mailElemCnt mailElemCntA">
                    <a onClick="alert('Add Dialog for Contact List');">To</a>
                </div>
                <div class="mailElemCnt">
                    <input type="text" id="mailTo" placeholder="abcTo@xyz.com"/>
                </div>
                <div class="mailElemCnt mailElemContExpand">
                    <a onClick="openCC()">CC</a>
                    <a onClick="openBCC()">BCC</a>
                </div>
            </div>
            <div id="mailIDCc" class="mailElem hidden">
                <div class="mailElemCnt mailElemCntA">
                    <a onClick="alert('Add Dialog for Contact List');">CC</a>
                </div>
                <div class="mailElemCnt">
                    <input type="text" id="mailCC" placeholder="abcCC@xyz.com"/>
                </div>
            </div>
            <div id="mailIDBcc" class="mailElem hidden">
                <div class="mailElemCnt mailElemCntA">
                    <a onClick="alert('Add Dialog for Contact List');">BCC</a>
                </div>
                <div class="mailElemCnt">
                    <input type="text" id="mailBCC" placeholder="abcBCC@xyz.com"/>
                </div>
            </div>
            <div id="mailIDSubject" class="mailElem">
                <div class="mailElemCnt mailElemCntLbl">
                    <label>Subject</label>
                </div>
                <div class="mailElemCnt">
                    <input type="text" id="mailSubject" placeholder="My Subject"/>
                </div>
            </div>
        </div>
        <div class="mailBodyBox">
            <textarea rows="4" id="mailIDBody" placeholder="Compose" class="mailBody"></textarea>
        </div>
        <div  class="mailboxBottom mailSend">
            <input type="button" value="Send" onClick="alert('Change Related to Mail Submit');"/>
        </div>
    </div>
    <script>
        function openCC(){
            $('#mailIDCc').toggle(500);
        }
        function openBCC(){
            $('#mailIDBcc').toggle(500);
        }
    </script>
</body>enter image description here
</html>

【讨论】：

试用此代码用于 Gmail 发送框。我使用 JQuery 来隐藏和显示抄送和密件抄送，就像在 Gmail 中一样，使用简单的 CSS 进行设计。