Question

我在WordPress中使用插件添加了一个promobar，它有一个“+”和“x”来隐藏/显示整个栏（这就是它：https://wp-me.com）。然后我将其复制到Blogger，它在这里工作得很好：http://www.tatweir.com

问题出在Blogger上，因为我想添加一个类似的“+”＆amp;栏中的“x”表示访问者隐藏/显示栏的能力（与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>$3.45 شهريا&#1611;</strong> بدلا&#1611; من <del>$7.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）。并且，小提琴。

我希望这可以帮到你。

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>$3.45 شهريا&#1611;</strong> بدلا&#1611; من <del>$7.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/

使用一个链接使用JQuery显示/隐藏Div

1 个答案: