使用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;

接下来，我有联系表：

<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 () {