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

Question

我已经在WordPress中添加了一个promobar，它有一个舔“+”和“x”来隐藏/显示整个栏（这是：https://wp-me.com）。然后，我已经将它复制到Blogger和它运作良好的位置：http://www.tatweir.com

问题是Blogger现在，我想类似的“+” &“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小提琴

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