使用 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 () {）