使用一個鏈接顯示/隱藏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/