使用jQuery

时间:2016-02-11 15:54:53

标签: javascript jquery html css

我想将Contact Us按钮的位置修改到panel div的底部,所以如果我点击按钮,它会随panel一起移动。如何使用现有代码实现此目的?

另外,我希望Contact Us按钮文字在打开后更改为阅读Close

这是演示https://jsfiddle.net/4v4e5rjc/



		jQuery('.sub-menu').addClass('dropdown-menu'); 

		jQuery(document).ready(function($) {

			$('ul.nav li.dropdown, ul.nav li.dropdown-submenu').hover(function() {
				$(this).find(' > .dropdown-menu').stop(true, true).delay(200).fadeIn();
			}, function() {
				$(this).find(' > .dropdown-menu').stop(true, true).delay(200).fadeOut();
			});

			jQuery("#open").click(function(){
				jQuery("div#panel").slideDown("slow");	
			});		
			jQuery("#close").click(function () {
		   		jQuery("div#panel").slideUp("slow");	
			});

		});

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
    height:3000px;
}

#panel {
        width: 100%;
        height: auto;
        color: #fff;
        overflow: hidden;
        position: relative;
        z-index: 3;
        display: none;
        margin-left:10px;
        background:red;
        padding:15px;
        margin-top: -1px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    /*
      Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
      CSS from:       http://codepen.io/transportedman/pen/NPWRGq
      and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
      Inspired from:  http://codepen.io/Rowno/pen/Afykb 
    */
    .carousel-fade .carousel-inner .item {
      opacity: 0;
      transition-property: opacity;
    }

    .carousel-fade .carousel-inner .active {
      opacity: 1;
    }

    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .carousel-fade .carousel-inner .next.left,
    .carousel-fade .carousel-inner .prev.right {
      opacity: 1;
    }

    .carousel-fade .carousel-control {
      z-index: 2;
    }

    /*
      WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
      Need to override the 3.3 new styles for modern browsers & apply opacity
    */
    @media all and (transform-3d), (-webkit-transform-3d) {
        .carousel-fade .carousel-inner > .item.next,
        .carousel-fade .carousel-inner > .item.active.right {
          opacity: 0;
          -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
        }
        .carousel-fade .carousel-inner > .item.prev,
        .carousel-fade .carousel-inner > .item.active.left {
          opacity: 0;
          -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
        }
        .carousel-fade .carousel-inner > .item.next.left,
        .carousel-fade .carousel-inner > .item.prev.right,
        .carousel-fade .carousel-inner > .item.active {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
        }
    }

    .shortcode input[type="text"], 
    .shortcode input[type="email"], 
    .shortcode input[type="url"], 
    .shortcode input[type="password"], 
    .shortcode input[type="search"], 
    .shortcode select {
        padding: 13px !important;
        width: 100% !important;
        height: 43px !important;
        margin-bottom: 7px !important;
        color: #707070 !important;
        border: 1px solid #c2c2c2 !important;
        font-family: "Crimson Text" !important;
        font-style: italic !important;
        font-size: 14px !important;
        border-radius: 0px !important;
        outline: none !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .shortcode textarea {
        overflow: auto;
        padding-left: 3px;
        vertical-align: top;
        padding: 15px !important;
        width: 100%;
        height: 142px;
        border-radius: 0px;
        border: 1px solid #c2c2c2 !important;
        margin-bottom: 7px !important;
        color: #707070 !important;
        font-family: "Crimson Text" !important;
        font-style: italic !important;
        font-size: 14px !important;
        outline: none !important;
    }

    input.wpcf7-form-control.wpcf7-submit {
        border-radius: 0px !important;
        box-shadow: none !important;
        text-shadow: none !important;
        background: #898989 !important;
        color: #fff !important;
        width: 100% !important;
        height: 43px !important;
        outline: none !important;
        font-family: lato !important;
        font-size: 13px !important;
        letter-spacing: 1px !important;
    }

    .carousel-indicators {
        display:none;
    }

    #toppanel {
        position: absolute;
        right: 10px;
        z-index: 400000;
        width: 100%;
    }
    
    .tab {
      background:#ccc;
      width:100px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container" style="position:relative;z-index: 400000;">

        <div class="row">

            <div class="col-lg-12">

                <div id="toppanel"> 

                    <div id="panel">

                    <div class="col-lg-8">

                        <p>We check our emails every day and reply even if we’re at dinner! Fill out the form below : )</p>

                        <div role="form" class="wpcf7" id="wpcf7-f60-o1" lang="en-US" dir="ltr">

                        <div class="shortcode">

                            <div role="form" class="wpcf7" id="wpcf7-f233-o1" lang="en-US" dir="ltr">

                                <div class="screen-reader-response"></div>
                                <form name="" action="/contact/#wpcf7-f233-o1" method="post" class="wpcf7-form" novalidate="novalidate">
                                <div style="display: none;">
                                <input type="hidden" name="_wpcf7" value="233" />
                                <input type="hidden" name="_wpcf7_version" value="4.1.2" />
                                <input type="hidden" name="_wpcf7_locale" value="en_US" />
                                <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f233-o1" />
                                <input type="hidden" name="_wpnonce" value="8d1444dc03" />
                                </div>
                                <div>
                                <div style="float:left; width:49%">
                                <span class="wpcf7-form-control-wrap name"><input type="text" name="name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Name" /></span><br />
                                <span class="wpcf7-form-control-wrap surname"><input type="text" name="surname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Surname" /></span><br />
                                <span class="wpcf7-form-control-wrap email-404"><input type="email" name="email-404" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email Address" /></span><br />
                                <span class="wpcf7-form-control-wrap email-sections"><select name="email-sections" class="wpcf7-form-control wpcf7-select" aria-invalid="false"><option value="I am enquiring about...">I am enquiring about...</option><option value="Design services">Design services</option><option value="Career opportunities">Career opportunities</option><option value="Press &amp; PR">Press &amp; PR</option><option value="General enquiry">General enquiry</option></select></span>
                                </div>
                                <div style="float:right; width:50%">
                                <span class="wpcf7-form-control-wrap messege"><textarea name="messege" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Message"></textarea></span><br />
                                <input type="submit" value="SEND" class="wpcf7-form-control wpcf7-submit" />
                                </div>
                                </div>
                                <div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
                                </div>
                            
                            </div>

                        </div>

                    </div>

                </div>

            </div>
            
            </div>   

        </div>

    </div>

</div>
    
                <nav class="navbar navbar-default navbar-fixed-top">
                    
                    <div class="container">

                        <div class="col-lg-12">

                            <div class="row">

                                <div class="tab contact-details">
                        
                                    <div>
                                        <a id="open" class="open" href="#">Contact Us</a> 
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="navbar-header title">
                            <a class="navbar-brand page-scroll" href="http://localhost:8888/site/"><img src="http://placehold.it/200x100" class="logoimg"></a>
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                    
                    </div>

                </nav>

			</div><!-- .site-content -->

		</section>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

我使用布尔值来设置按钮打开的功能,并改变类的位置&#34; panel&#34;要修复,这是文件。希望它可以帮到你。

https://jsfiddle.net/Yazsid/4v4e5rjc/12/

jQuery(document).ready(function($) {

        $('ul.nav li.dropdown, ul.nav li.dropdown-submenu').hover(function() {
            $(this).find(' > .dropdown-menu').stop(true, true).delay(200).fadeIn();
        }, function() {
            $(this).find(' > .dropdown-menu').stop(true, true).delay(200).fadeOut();
        });

        jQuery("#open").click(function(){
  if(!abierto){
            jQuery("div#panel").slideDown("slow");  
    jQuery("#open").html("Close");
    abierto=true;
    }else{
        jQuery("div#panel").slideUp("slow");    
   jQuery("#open").html("Contact us");
   abierto=false;
}
        });     


    });