我有这个联系我们按钮贴在屏幕的左边,附有一个默认隐藏的表格(因为它的左侧为(-472px))。
现在,当我点击它时,左边变为0px并使用联系我们按钮本身形成幻灯片(使用animate方法)。
当我再次点击联系我们按钮表格时,按钮向后滑动并隐藏左侧属性设置为-472。
现在我想要隐藏如果使用点击屏幕上的其他地方而不是单击按钮。我已经尝试了,但现在它的幻灯片插入并同时向后滑动并隐藏。
如何使其正常工作。
代码所在的问题是:jquery代码不起作用的是代码的底部,如
// clicking somewhere else ------------------------------------------------------------------
jQuery("body").click(function(e){
完整代码
<style>
#form_contact_wrapper{position: absolute;top: 225px;left: -472px;z-index: 999;}
#contact-btn-div{top: 267px;float:left;}
#form_contact {z-index: 999;width: 450px;border: 1px solid;border-color: #BBB;padding: 10px;background-color: #FFF;float:left;}
#form_contact p.required{width: 450px;}
</style>
<?php if(Mage::helper('customer')->isLoggedIn() && Mage::app()->getStore()->getCode()=="default"):?>
<div id="form_contact_wrapper">
<div id="form_contact" class="form_contact">
<div id="form_contact_container" class="form_contact_container">
<div class="form_contact_div">
<?php
$filter = new Mage_Widget_Model_Template_Filter();
$_widget = $filter->filter('{{widget type="webforms/form" webform_id="' . Mage::getStoreConfig('webforms/contacts/webform') . '" template="webforms/default.phtml" redirect_url="www.google.com" }}');
echo $_widget;
?>
<a id="contact_new_question_link" href="javascript:void(0)" style="display: none;text-decoration: underline;"><span><span id = "contact_ask_another">Ask another Question</span></span></a>
</div>
</div>
</div>
<div id="contact-btn-div"><a href="#" id="contact-btn"><img src="<?php echo $this->getSkinUrl('images/contact-us.png'); ?>"></a></div>
</div>
<script type="text/javascript">
jQuery(function(){
var webform_id = <?php echo Mage::getStoreConfig('webforms/contacts/webform'); ?> ;
var webform_label = jQuery("#webform_"+webform_id+"_form form div ul li div label" );
var webform_fields = jQuery("#webform_"+webform_id+"_form form div ul li div label").next().children();
webform_label.css('width', '100px');
webform_fields.css("width","250px");
// with sucess text
if(jQuery('#form_contact_container .webforms-success-text').length == 1){
jQuery("#form_contact_wrapper").animate({'left': '0px'});
jQuery("#form_contact_wrapper").addClass('active');
jQuery('#form_contact_container .webforms-success-text').show();
jQuery('#form_contact_container .webforms-success-text p').attr('id','success_msg');
jQuery("a#contact_new_question_link").show();
jQuery("a#contact_new_question_link").addClass('active');
jQuery("#webform_"+webform_id+"_form").css({display:'none'});
jQuery("#contact-btn-div").toggle(function(){
jQuery("#form_contact_wrapper").removeClass('active');
jQuery("#form_contact_wrapper").animate({'left': '-472px'});
},function(){
jQuery("#form_contact_wrapper").animate({'left': '0px'});
jQuery("#form_contact_wrapper").addClass('active');
});
if(jQuery("ul.messages").length > 0){
//
jQuery("#feedback_btn_form").after(jQuery("ul.messages"));
}
}
// without success text
if(jQuery('#form_contact_container .webforms-success-text').length == 0){
jQuery("#contact-btn-div").click(function(){
if(jQuery("#form_contact_wrapper").hasClass('active')){
jQuery("#form_contact_wrapper").animate({'left': '-472px'});
jQuery("#form_contact_wrapper").removeClass('active');
}else{
jQuery("#form_contact_wrapper").animate({'left': '0px'});
jQuery("#form_contact_wrapper").addClass('active');
}
});
}
// new question
jQuery("a#contact_new_question_link").click(function(){
// jQuery("#form_contact_wrapper").animate({'left': '-472px'});
jQuery('#form_contact_container .std.webforms-success-text').css({display:'none'});
jQuery(this).hide();
jQuery("#webform_"+webform_id+"_form").show();
});
// clicking somewhere else ------------------------------------------------------------------
jQuery("body").click(function(e){
if(jQuery("#form_contact_wrapper").hasClass('active')){
if(jQuery(e.target).closest('#form_contact').length == 0 && e.target.id != '#contact-btn-div'){
jQuery("#form_contact_wrapper").removeClass('active');
jQuery("#form_contact_wrapper").animate({'left': '-472px'});
}
}
});
});
</script>
<?php endif; ?>
请提出建议。非常感谢。