使用jQuery移动按钮
如果我点击Contact
按钮,如何将Close
按钮移动到#panel
以下?目前它是fixed
。使用jQuery移动按钮
这里是我的演示: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://*.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 & PR">Press & 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>
第一:这是更好地使用$(this)
代替$('#open')
内.click()
二:添加到你的CSS:
.contact-details{ position:relative; }
更改$('#open').click()
这个
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;
}
});
谢谢 - 完美的作品! :-D – michaelmcgurk
您好,我很高兴它有帮助 –
在 “联系我们” 是点击,您可以添加一个类来定位面板下方的按钮。
CSS
.close {
position:absolute;
top: 280px;
}
的Javascript
$('.tab').addClass('close');
再次
$('.tab').removeClass('close');
这太棒了!是否有可能移动这个“与”面板,所以它看起来像它的一部分? :-) – michaelmcgurk
点击后然后将其删除你为什么不只是添加一个按钮i在切换幻灯片的面板上? 这个按钮自然会随着面板“移动”。而且根本不需要jQuery。
这是一个很好的观点。我确信以前我曾尝试过这种方式,但它没有工作:( – michaelmcgurk
创建一个内部按钮也不需要设计其余布局以避免与新的“关闭”按钮位置冲突(如果有更多除了列出的内容外,不知道是否属于这种情况,请谨记精简设计。) – Josh
这是一个了不起的建议,我将重新考虑我到目前为止所做的工作: - ) – michaelmcgurk
我建议从[格式化你的JS正确](http://jsbeautifier.org)开始。如果很难阅读,则很难调试。 –
感谢Jay,现在看起来更加整齐:-D – michaelmcgurk