翻譯頁面和聯繫表使用JavaScript和CSS

Question

我有一個標籤，讓我的用戶在使用英語來查看該頁面的選項或保加利亞：

<select id="LangSelect" class="select"> 
    <option value="en">English</option> 
    <option value="bg">Български</option> 
</select> 

和頁面被這裏翻譯過來就是我的JS代碼：

[lang="bg"] .lang-en { 
    display: none; 
} 

[lang="en"] .lang-bg { 
    display: none; 

接下來我有我的聯繫FO：

$(function() { 
    $('#fade').fadeToggle(1000).fadeToggle(1000); 

    $(document).ready(function() { 
     var cookieLanguage = $.cookie('language'); 
     if (cookieLanguage && ['bg', 'en'].indexOf(cookieLanguage) > -1) 
      $('html').attr('lang', cookieLanguage); 

     $('#LangSelect').change(function() { 
      var lang = $(this).val(); 
      $('html').attr('lang', lang); 
      $.cookie('language', lang, { 
       expires: 7 
      }); 
     }); 
    }); 

並隱藏其他的語言部分我的CSS代碼RM：

<footer> 
    <div class="row"> 
     <div class="twelve columns"> 
     <div id="contact"></div> 
     <div id="flip" class="f-btn lang-en"><span>Contact Me &raquo;</span></div> 
     <div id="flip" class="f-btn lang-bg"><span>Свържи се с мен &raquo;</span></div> 

     <ul id="foot-social"> 
      <li> 

      </li> 
      <li> 

      </li> 
      <li> 

      </li> 
      <li> 

      </li> 
      <li> 

      </li> 
      <li> 
       <a href="" class="codepen" title="CodePen"> 

       </a> 
      </li> 

     </ul> 
     <br> 
     <div id="panel" class="lang-bg"> 
      <p class="lang-en">Please contact me for any questions, comments or inquiries.</p> 
      <p class="lang-bg">Чрез тази форма може да се свържете с мен.</p> 
      <div class="con-form"> 
       <form action="" id="form" method="post" name="form"> 
        <input class="lang-en" name="client" placeholder="Your Name" type="text" value="" required pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname"> 
        <input class="lang-bg" name="client" placeholder="Вашето Име" type="text" value="" required pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname"> 

        <input class="lang-en" name="email" placeholder="Your Email" type="email" value="" required> 
        <input class="lang-bg" name="email" placeholder="Вашия Имейл" type="email" value="" required> 
        <textarea class="lang-en" name="comment" placeholder="Your Comments Here..." id="comment"></textarea> 
        <textarea class="lang-bg" name="comment" placeholder="Съобщение..." id="comment"></textarea> 
        <input class="o-btn lang-en" type="Submit" value="Submit"> 
        <input class="o-btn lang-bg" type="Submit" value="Изпрати"> 

       </form> 

      </div> 

     </div> 

     <a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a> 
     <div class="footer-images"> 

     <img class="social" src="images/twitter.png"> 
     </div> 
    </footer> 

那獲取此供電JS代碼：

$(function(){ 
    $("#flip").click(function(e){ 
e.preventDefault(); 
     $("#panel").slideToggle(); 
     $('html, body').animate({ 
     scrollTop: 10000 
    }); 
    }); 
}); 

當用戶從選擇菜單中選擇英語或保加利亞的頁面被翻譯以及接觸形式英文作品完美很好，但是當你翻譯頁面保加利亞語，你點擊聯繫人按鈕時，表格根本不顯示，這個問題一直困擾我幾天，現在我不能把手指放在上面，什麼是我做錯了？

Answer 1

您的代碼：

$(function(){ 
    $("#flip").click(function(e){ 
     e.preventDefault(); 
     $("#panel").slideToggle(); 
     $('html, body').animate({ 
      scrollTop: 10000 
     }); 
    }); 
}); 

新代碼：

$(function(){ 
    $(".flip").click(function(e){ 
     e.preventDefault(); 
     $("#panel").slideToggle(); 
     $("#panel").slideToggle(); 
     $('html, body').animate({ 
      scrollTop: 10000 
     }); 
    }); 
}); 

您更改語言$("#panel").slideToggle();每次被調用。這意味着每次改變語言時，面板都會從設置高度切換到0並將高度設置爲初始值（或者您最初設置的高度）。所以需要兩次點擊才能隱藏元素並再次顯示。 以下是適用於.slideToggle的JQuery API：https://api.jquery.com/slidetoggle/

您也有panel作爲id，而不是可能成爲問題一部分的類。 （就像一個筆記，你可以擺脫$(document).ready(function() {在用於翻譯的代碼，因爲你已經有$(function() {在頂部）