0

我有这个联系我们按钮贴在屏幕左侧,该按钮附加了一个默认隐藏的表单(因为它的左侧为负(-472px))。

现在,当我单击它时,左侧变为 0px,并使用联系我们按钮本身形成幻灯片(使用动画方法)。

当我再次单击联系我们按钮表单时,按钮向后滑动并隐藏左属性再次设置为 -472。

现在,如果使用单击屏幕上的其他位置而不是仅单击按钮,我也希望它隐藏。我已经尝试过,但现在它会同时滑入并滑回并隐藏。

我怎样才能让它正常工作。

问题所在的代码: jquery code which is not working is that the bottom of the code like

        // 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; ?>

请提出一些建议。非常感谢。

4

1 回答 1

0

使用.blur()方法。blur 事件在失去焦点时发送到元素。元素可能会通过键盘命令(例如 Tab 键)或通过鼠标单击页面上的其他位置而失去焦点。阅读更多

于 2013-06-03T01:28:41.050 回答