使用jQuery单击时移动按钮

Question

我想将“ 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> 

Answer 1

我使用布尔值将按钮的功能设置为“打开”，并将“面板”类的位置更改为固定，这是文件。 希望对您有帮助。

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;
}
        });     


    });