我有一个标签,可让我的用户选择以英语或保加利亚语查看该页面:
<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 »</span></div>
<div id="flip" class="f-btn lang-bg"><span>Свържи се с мен »</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
});
});
});
当用户从选择菜单中选择英语或保加利亚语时,页面会被翻译,并且联系表单的英文版本也很完美,但是当您将页面翻译为保加利亚语并且单击联系人按钮时,表单不会显示,这个问题一直困扰着我几天,我无法指责它,我做错了什么?
答案 0 :(得分:0)
您的代码:
$(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 () {