无法设置我的联系我们滑块

Question

我一直试图设计我的“联系我们”滑块窗口，但由于我缺乏知识（开始网站设计仅为我自己的项目一个月）我有点卡住了。 功能很好，但有一些问题：

1. “联系我们”文字和我想要排成一行的图片无效。
2. 在折叠模式下，包含文本“联系我们”的div正在减小宽度。

请原谅我不那么技术性的语言，因为我对这个概念不熟悉。请参考我的网站koncreteplanet.com ..同时，我已经创建了一个jsfiddle来瞥见我正在使用的代码（ https：// jsfiddle.net/jjff2o2x/ ）。 提前致谢！！

Javascript代码：

jQuery("#ContactUs_header").click(function () {
   jQuery('#slideContactUsbox').slideToggle('slow');
});

HTML / PHP代码：

<div class="row">
    <div class="col-md-8">

    </div>

    <div class="col-md-4" id="contactus-panel">
        <div class="contactus-panel">
            <div id="ContactUs_header" class="contactus_footer" >
                <a  href="#"><p>Contact Us</p></a>

                <img align="right" width=auto height="40px" src= "<?php echo bloginfo('template_directory') . "/image/handshake.png" ;  ?>">

            </div>

            <div id="slideContactUsbox" class="contactus-extended">
                <div class="container" style="width:300px;align:left;" id="MailUs-Panel">
                    <form name="Form-MailUs" id="Form-MailUs" method="post" action=<?php echo (get_template_directory_uri() . "/contactus/html_form_send.php"); ?> >
                        <div class="">
                            <input  type="text" class="form-control mailflds" name="first_name" id="first_name" maxlength="50" size="30" placeholder="Name">
                        </div>
                        <br>
                        <div>
                            <input  type="text" class="form-control mailflds" name="email" id="email" maxlength="80" size="30" placeholder="E-Mail">
                        </div>
                        <br>
                        <div>
                            <input  type="text" class="form-control mailflds" name="telephone" id="telephone" maxlength="30" size="30" placeholder="Mobile / Landline Number">
                        </div>
                        <br>
                        <div>
                            <textarea  name="comments" id="comments" class="form-control mailflds" maxlength="1000" cols="25" rows="6" placeholder="Enter your comments"></textarea>
                        </div>
                        <br>
                        <div>
                            <Button class="btn btn-primary btn-block btn-custom" id="Submit_MailUs" name="Submit_MailUs">Submit</Button>
                        </div>
                        <div id="ack-mailus-err" style="color:red;font-family:garamond;font-size:18px;text-align:center;">
                        </div>

                    </form>
                </div>

                <div id="ack-mailus" style="color:green;font-family:garamond;font-size:18px;text-align:center;">
                </div>
            </div>

        </div>   <!--    end of contactus panel    -->  
    </div>
</div>

CSS代码

.contactus-panel{
    position:fixed;
    bottom:0;
    z-index:9999;

}

.contactus_footer{
    position:relative;
    /*z-index: 10;  */
    /*float:right; */
    text-align: left;
    line-height: 1.5;
    cursor: pointer;
    padding: 5px 2px 4px 15px;
    font-family:'Raleway', garamond, sans-serif;
    font-size:20px;
    background-color: #084000;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    position: relative;
    width: 100%;
    vertical-align:center;
    float:left;
}

.contactus_footer a {
    color: #fff;
}
.contactus-extended{
    background-color:#fff;  
    padding-top:20px;
    padding-bottom:20px;
}

Answer 1

slideToggle()是jQuery方法。 请使用jQuery。

https://jsfiddle.net/pgqnjdvp/

Answer 2

我能够解决问题的两个部分..不能相信它就是那么简单..对于第2部分：我只是将宽度专门添加到容器中并且它不复存在......也解决了问题的第1部分。除了div类之外，还添加了float和vertical-align：中间的text和img元素样式，并获得了所需的结果。