Show/Hide Div 与 JQuery 使用一个 Link

Question

我使用插件在 WordPress 中添加了一个宣传栏，它在 hide/show 整个栏中添加了一个“+”和“x”（就是这样：https://wp-me.com). Then I've copied it to Blogger and it is working well here: http://www.tatweir.com

现在问题出在 Blogger 上，因为我想在栏中添加一个类似的“+”和“x”，让访问者能够 hide/show 这个栏（与 WordPress 完全相同）。

这是我目前在 Blogger 中使用的代码：

<div class='tatweir_bar' style='background-color: #006991; color: #ffffff; width:100%; text-align: center; z-index: 9999999999;'>
    <style type='text/css'>
        .tatweir_bar { top: 0px; position: fixed; -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);}
        .tatweir_bar .tatweir_bar-container { width: 100%; font-size: 18px; position: relative;
                                              margin-right: auto;
                                              margin-left: auto;
                                              max-width: 100%;
                                              padding: 10px 60px;
                                              line-height: 1.4;}
        .tatweir_bar a { color: #00dbaf;}
        .tatweir_bar .tatweir_bar-button { color: #fff; background-color: #00dbaf; margin: .2em .5em;     display: inline-block;
                                           padding: 6px 10px;
                                           font-size: 12px;
                                           border-radius: 3px;
                                           color: #fff!important;
                                           outline: 0;
                                           border: 0;
                                           cursor: pointer;
                                           text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);}
        </style>
        <div class='tatweir_bar-container-outer'>
        <div class='tatweir_bar-container tatweir_bar-clearfix'>
            <div class='tatweir_bar-button-type tatweir_bar-content'>
                <span class='tatweir_bar-text'>عرض خاص لفتره محدودة: احصل على استضافة من  <strong>بلوهوست</strong> بسعر <strong>.45 شهريا&#1611;</strong> بدلا&#1611; من <del>.99</del>.  </span><a class='tatweir_bar-button' href='https://wp-me.com/offer/bluehost' rel='nofollow' target='_blank'>إحصل على الخصم الآن</a></div>                                 </div>
    </div>
</div>

提前致谢！

Answer 1

请在下面找到更新的 HTML、CSS 和 JS（确保使用 jQuery）。而且，fiddle.

希望对您有所帮助。

HTML

<div id="notificationDiv" class='tatweir_bar down'>
    <div class='tatweir_bar-container-outer notification_content'>
        <div class='tatweir_bar-container tatweir_bar-clearfix'>
            <div class='tatweir_bar-button-type tatweir_bar-content'>
                <span class='tatweir_bar-text notification_text'>عرض خاص لفتره محدودة: احصل على استضافة من  <strong>بلوهوست</strong> بسعر <strong>.45 شهريا&#1611;</strong> بدلا&#1611; من <del>.99</del>.  </span>
                <a class='tatweir_bar-button notification_button' href='https://wp-me.com/offer/bluehost' rel='nofollow' target='_blank'>إحصل على الخصم الآن</a>
            </div>                                 
        </div>
    </div>
    <div id="notification_close"><span> + </span></div>
    <div id="notification_open"> + </div>
</div>

<div id="bodyContent">
        <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p><p>
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </p><p>
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        </p>
</div>

CSS

 html, body {
            margin: 0px;
            box-sizing: border-box;
        }

        body {
            box-sizing: border-box;
            transition: padding-top ease 0.3s, padding-bottom ease 0.3s;
        }

        #bodyContent {
             box-sizing: border-box;
        }

        #notificationDiv {
            text-align: center;
            position: fixed;
            top: 0;
            left: 0px;
            width: 100%;
            z-index: 9999;
            min-height: 30px;
            background-color: #006991; 
            color: #ffffff; 
            text-align: center; 
            z-index: 9999999999;
        }

         #notificationDiv.up{
            transform: translateY(-100%) translate3d(0,0,0);
            transition: transform ease 0.3s;
        }

         #notificationDiv.down{
            transform: translateY(0%) translate3d(0,0,0);
            transition: transform ease 0.3s;
        }
        #notification_open, #notification_close {
            position: absolute;
        }

        #notification_close {
            right: 30px;
            top: 50%;    
            height: 8px;
            border-bottom: 2px solid #e9f7fd;
            font-size: 22px;
            line-height: 0px;
            cursor: pointer;
            color: #fff;
            font-weight: bold;
        }

        #notification_close span{
             transform: rotate(45deg) translate3d(0,0,0);
             display: block
        }

          #notification_close:hover {
            border-bottom: 2px solid #00dbaf;
        }

         #notification_open{
            right: 20px;
            bottom: -38px;
            font-size: 16px;
            background-color: #006991;
            color: #ffffff;
            padding: 10px;
            cursor: pointer;
        }

        .notification_content{
             margin-right: auto;
             margin-left: auto;
             cursor: pointer;
        }

        .notification_button {
            background-color: #00dbaf;
            display: inline-block;
            padding: 6px 10px;
            font-size: 12px;
            border-radius: 3px;
            color: #fff;
            outline: 0;
            border: 0;
            cursor: pointer;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            text-decoration: none;
            vertical-align: middle;
        }
        .notification_text {
            color: #fff;
            vertical-align: middle;
            margin: .2em .5em;
        }      

         .tatweir_bar { 
            -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
            box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
        }

         .tatweir_bar .tatweir_bar-container { 
                                                width: 100%; 
                                                font-size: 18px; 
                                                position: relative;
                                                margin-right: auto;
                                                margin-left: auto;
                                                max-width: 100%;
                                                padding: 10px 60px;
                                                line-height: 1.4;
                                                box-sizing: border-box;
                                            }
          .tatweir_bar a { 
                            color: #00dbaf;
                         }
          .tatweir_bar .tatweir_bar-button { 
                                               color: #fff; 
                                               background-color: #00dbaf; 
                                               margin: .2em .5em;     
                                               display: inline-block;
                                               padding: 6px 10px;
                                               font-size: 12px;
                                               border-radius: 3px;
                                               color: #fff!important;
                                               outline: 0;
                                               border: 0;
                                               cursor: pointer;
                                               text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

                                            }

JS

$(document).ready(function () {

     $('body').css('padding-top', $("#notificationDiv").height());
     $("#notification_open").hide();

    $("#notification_open").click(function () {
        $('body').css('padding-top', $("#notificationDiv").height());
        $("#notification_close").show();
        $("#notificationDiv").removeClass("up").addClass("down");
        $(this).hide();
    });

    $("#notification_close").click(function () {
        $('body').css('padding-top', '0px');
        $("#notification_open").show();
        $("#notificationDiv").removeClass("down").addClass("up");
        $(this).hide();
    });
});

JS Fiddle

https://jsfiddle.net/guruling/8e991smf/

Show/Hide Div 与 JQuery 使用一个 Link

Show/Hide Div with JQuery using one Link

html

javascript

jquery

blogger