как скрыть ползунок при щелчке в другом месте в теле

Question

У меня есть кнопка для контакта с вами слева от экрана, который имеет прикрепленную форму, которая по умолчанию скрыта (потому что она имеет отрицательный левый (-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; ?> 

Пожалуйста, предложите что-то. Большое спасибо.

Answer 1

Использование .blur() способ. Событие размытия отправляется элементу, когда он теряет фокус. Элемент может потерять фокус с помощью команд клавиатуры, таких как клавиша Tab или щелчков мыши в другом месте на странице. Read more