Traduction de la page et le formulaire de contact en utilisant JavaScript et CSS

Question

J'ai une étiquette qui donne mes utilisateurs la possibilité d'afficher la page en anglais ou en bulgare:

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

Et la page est traduit ici est mon code 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 
      }); 
     }); 
    }); 

Et mon code CSS qui cache les autres parties de la langue:

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

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

Ensuite j'ai mon contact 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> 

qui obtient propulsé par ce JS code:

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

Lorsque l'utilisateur choisit l'anglais ou le bulgare dans le menu de sélection de la page est traduit et ainsi que le formulaire de contact fonctionne en anglais parfaitement bien, mais quand vous traduisez la page en Bulgare et que vous cliquez sur le bouton de contact, le formulaire ne s'affiche pas du tout, ce problème m'inquiète depuis quelques jours et je ne peux pas mettre le doigt dessus. Je fais mal?

Answer 1

Votre code:

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

Code:

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

Chaque fois que vous changez de langue $("#panel").slideToggle(); est appelée. Cela signifie que chaque fois que vous changez de langue, le panneau passe de la définition de la hauteur à 0 et de la définition de la hauteur initiale (ou de la hauteur à laquelle vous l'avez initialement définie). Il faut donc deux clics pour cacher l'élément et le montrer à nouveau. Voici l'API JQuery pour .slideToggle: https://api.jquery.com/slidetoggle/

Vous avez également panel comme id au lieu d'une classe qui peut faire partie du problème. (Juste comme une note, vous pouvez vous débarrasser de $(document).ready(function() { dans le code utilisé pour la traduction puisque vous avez déjà $(function() { en haut)