任何帮助将不胜感激。
我有一页充满了“抽屉”，它们像手风琴一样运作。由于各种原因，无法使用 Jquery UI 手风琴。因此，我使用动态驱动器中的 Animated Collapse 2.4 代替。每个抽屉 div 都包含独特的表单。在这些表单上，我使用 Jquery Validator 和 tooltipster 来显示验证错误。
我遇到的问题是，当在验证成功之前关闭抽奖时，工具提示器不会完全消失，它们会在表单所在的位置徘徊，如果您滚动页面或完全移动它们，它们会跳到左上角屏幕显示一半！所以他们有点隐藏但不完全。就好像他们只需要向上和向左定位几十个像素。
因为我有多个包含表单的 div 抽屉，所以有时在完成一个特定的绘图表单时需要切换到另一个抽屉以引用其他数据。所以有时我需要用户能够在不完整填写每个表单的情况下关闭抽屉，然后再回来查看。
请问有什么想法吗？
您需要包含来自 Dynamic Drive 的 js 脚本以用于 animatedcollapse.js - 可在Link
您还需要包含 jquery.tooltipster.js 和 css 文件，这些文件可以在Link下载
HTML：
<head>
<script src="js/animatedcollapse.js" type="text/javascript" ></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.js"></script>
</head>
<body>
<p><b>Example 1 (individual):</b>
</p>
<a href="javascript:animatedcollapse.toggle('cust')"></a> <a href="javascript:animatedcollapse.show('cust')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cust')">Slide Up</a>
<div id="cust" style="width: 800px; background: #FFFFCC; display:none">
<form id="custForm" name="custForm" method="post">
<h4>Enter your customer details</h4>
<p>Title:
<BR />
<select name="titleBox" id="titleBox">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Mis">Ms</option>
<option value="Dr">Dr</option>
<option value="Dr">Sir</option>
</select>
</p>Firstname:
<BR>
<input name="firstnameBox" type="text" id="firstnameBox" size="40" onkeyup="" onblur="" minlength="1" required />
<BR />Surname:
<BR>
<input name="surnameBox" type="text" id="surnameBox" size="40" onkeyup="" minlength="2" required />
<BR />Home tel:
<BR />
<input name="hometelBox" type="text" class="phoneUK" id="hometelBox" size="40" onkeyup="" required />
<BR />Mobile:
<BR />
<input name="mobileBox" type="text" id="mobileBox" size="40" minlength="7" onkeyup="" required/>
<BR />Work tel:
<BR />
<input name="worktelBox" type="text" id="worktelBox" size="40" minlength="7" onkeyup="" required/>
<BR />Email:
<BR />
<input name="emailBox" type="text" class="EMAIL" id="emailBox" size="40" />
<BR />
<BR />
<BR />
<strong><em>Address Manual Entry</em></strong>
<BR/>
<BR />House Name/Flat number:
<BR />
<input name="man_housenmBox" onkeyup="" type="text" id="man_housenmBox" size="40" />
<BR />House Number:
<BR />
<input name="man_housenoBox" onkeyup="" type="text" id="man_housenoBox" size="40" />
<BR />Street Name 1:
<BR />
<input name="man_street1Box" onkeyup="" type="text" id="man_street1Box" size="40" minlength="4" required/>
<BR />Street Name 2:
<BR />
<input name="man_street2Box" onkeyup="" size="40" />
<BR />Town/City:
<BR />
<input name="man_townBox" type="text" id="man_townBox" size="40" minlength="4" />
<BR />County:
<BR />
<input name="man_countyBox" onkeyup="" type="text" id="man_countyBox" size="40" minlength="4" />
<BR />Postal Code:
<BR />
<input name="man_postcodeBox" class="postcodeUK" type="text" id="man_postcodeBox" minlength="4" />
<BR />
<BR />
<P align="center">
<button id="sub" value="Trigger validation" type="submit"><span class="ui-button-text">Trigger Valdation</span>
</button>
</P>
</form>
</div>
</body>
和 JS：
animatedcollapse.addDiv('cust');
animatedcollapse.ontoggle = function ($, divobj, state) {};
animatedcollapse.init();
$(document).ready(function () {
// initialize tooltipster on text input elements
$('#custForm input[type="text"]').tooltipster({
theme: 'tooltipster-shadow',
positionTracker: 'true',
trigger: 'custom',
onlyOne: false,
position: 'right',
animation: 'fall',
positionTrackerCallback: function(){
this.hide();}
});
});
jQuery.validator.messages.required = "";
$.validator.addMethod("EMAIL", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,6}$/i.test(value);
}, "Email Address is invalid: Please enter a valid email address.");
jQuery.validator.addMethod('phoneUK', function (phone_number, element) {
return this.optional(element) || phone_number.length > 9 &&
//phone_number.match(/^(((\+44)? ?(\(0\))? ?)|(0))( ?[0-9\s]{3,4}){3}$/);
phone_number.match(/^\(?(?:(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?\(?(?:0\)?[\s-]?\(?)?|0)(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}|\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4}|\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3})|\d{5}\)?[\s-]?\d{4,5}|8(?:00[\s-]?11[\s-]?11|45[\s-]?46[\s-]?4\d))(?:(?:[\s-]?(?:x|ext\.?\s?|\#)\d+)?)$/);
}, 'Please specify a valid UK phone number');
jQuery.validator.addMethod("postcodeUK", function (value, element) {
return this.optional(element) || /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i.test(value);
}, "Please specify a valid UK Postcode - with a space between the first and second parts - e.g. RG1 2BT");
var validator = $("#custForm").validate({
messages: {
firstnameBox: "Please enter a first name or initial (min 1 character).",
surnameBox: "Please enter a last name (min 2 characters).",
hometelBox: "Please enter the end user's home UK landline number (must be a valid UK number).",
worktelBox: "Please enter a work telephone number.",
mobileBox: "Please enter a mobile phone number.",
emailBox: "Please enter a valid email address.",
man_street1Box: "Please enter a street name",
man_townBox: "Please enter a Town.",
man_countyBox: "Please enter a County.",
man_postcodeBox: "Please enter a valid UK postal code, with a space between the first and second parts - e.g. RG1 2BT."
},
rules: {
hometelBox: {
required: true
},
emailBox: {
required: false,
email: true
}
},
errorPlacement: function (error, element) {
var lastError = $(element).data('lastError'),
newError = $(error).text();
$(element).data('lastError', newError);
$(element).tooltipster('show');
if (newError !== '' && newError !== lastError) {
$(element).tooltipster('content', newError);
$(element).tooltipster('show');
}
},
success: function (label, element) {
$(element).tooltipster('hide');
},
submitHandler: function (form) {
// do other things for a valid form
}
});