单击主体中的其他位置时如何隐藏滑块

Question

我在屏幕左侧粘贴了此与我们联系的按钮，该按钮具有默认情况下隐藏的附加表单（因为它的负数为（-472px））。

现在，当我单击它时，左侧变为0px并与“联系我们”按钮本身形成幻灯片（使用动画方法）。

当我再次单击“联系我们”按钮时，按钮向后滑动并隐藏，并将left属性再次设置为-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键）或单击页面其他位置的鼠标来失去焦点。 阅读更多