翻訳ページやお問い合わせフォームはJavaScriptを使用してCSS

Question

は、私は私のユーザーは、英語やブルガリア語のいずれかでページを表示するためのオプションを提供しますタグがあります。

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

をして、ページをここに翻訳さ私のJSコードは次のとおりです。

$(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コード：

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

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

次私は私の連絡先FOを持っています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 
    }); 
    }); 
}); 

、ユーザが選択メニューから、英語やブルガリア語のいずれかを選択するとページが翻訳され、問い合わせフォームは完全に英語でうまく機能として取得しますしかし、あなたがブルガリア語にページを翻訳し、あなたがフォームボタンをクリックしてもフォームが全く表示されない場合、この問題は2,3日間私を悩ませています。私はそれに私の指を置くことができません。私は間違っている？

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に設定し、高さを初期値（または最初に設定した高さ）に変更することを意味します。したがって、要素を非表示にして再度表示するには2回のクリックが必要です。あなたはまた、代わりに、問題の一部とすることができるクラスのIDとしてpanelを持ってhttps://api.jquery.com/slidetoggle/

： はここ.slideToggleのためのjQueryのAPIです。 $(function() {が既にあるので、翻訳に使用されているコードで$(document).ready(function() {を取り除くことができます）