使用jQuery移動按鈕

Question

如果我點擊Contact按鈕，如何將Close按鈕移動到#panel以下？目前它是fixed。

這裏是我的演示：https://jsfiddle.net/25u78gff/

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(); 
 
}); 
 
var abierto = false; 
 
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; 
 
    } 
 
}); 
 

 

 
});  \t \t

/* 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: fixed; 
 
     z-index: 3; 
 
     display: none; 
 
     margin-left:10px; 
 
     background:blue; 
 
     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> 
 

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

 
\t \t </section>

Answer 1

第一：這是更好地使用$(this)代替$('#open')內.click()

二：添加到你的CSS：

.contact-details{ position:relative; } 

更改$('#open').click()這個

JS Fiddle

var abierto = false; 
jQuery("#open").click(function() { 
    if (!abierto) { 
    var h = $('#panel').height() + 40; 
    jQuery("div#panel").slideDown("slow"); 
    $(this).html("Close"); 
    $(this).parents('.contact-details').animate({'top': h}, 600); 
    abierto = true; 
    } else { 
    jQuery("div#panel").slideUp("slow"); 
    $(this).html("Contact us"); 
    $(this).parents('.contact-details').animate({'top': 0}, 700); 
    abierto = false; 
    } 
}); 

Answer 2

在 「聯繫我們」 是點擊，您可以添加一個類來定位面板下方的按鈕。

CSS

.close { 
    position:absolute; 
    top: 280px; 
} 

的Javascript

$('.tab').addClass('close'); 

再次

$('.tab').removeClass('close'); 

JSFiddle

Answer 3

點擊後然後將其刪除你爲什麼不只是添加一個按鈕i在切換幻燈片的面板上？ 這個按鈕自然會隨着面板「移動」。而且根本不需要jQuery。