私はこのお問い合わせボタンを画面の左側に貼り付けていますが、これにはデフォルトで非表示になっているフォームが添付されています ((-472px) の負の左側があるため)。
クリックすると左が0pxになり、フォームが（アニメーションメソッドを使用して）お問い合わせボタン自体にスライドします。
お問い合わせボタンフォームをもう一度クリックすると、ボタンがスライドして戻り、プロパティを-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; ?>
何か提案してください。どうもありがとう。