使用jQuery单击移动按钮
Move button on click with jQuery
我想将Contact Us按钮的位置固定在paneldiv的底部，这样如果我单击该按钮，它会随着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 & 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>
</div><!-- .site-content -->
</section>我用布尔值设置了按钮打开的功能，并将类"面板"的位置更改为固定，这里是文件。希望对您有所帮助。
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;
}
});
});
相关文章：
- jquery移动对齐按钮取决于内容大小
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- 在带有Partial视图的MVC 5中，将提交按钮移动到表单外部
- 如何使用 JavaScript 函数在 JSP 中使用按钮移动到数据库的最后一条记录
- Onclick 无法正常工作，并且将按钮移动到下一行不起作用
- 如何在使用angularjs选项卡时单击按钮移动到下一个选项卡
- 根据选中的单选按钮移动到不同的页面
- 使用后退按钮移动单页应用程序 AngularJS
- 将BxSlider按钮移动到位
- 可滑动的内联按钮移动
- 当我按住鼠标按钮移动鼠标时，Fabric.js–元素是未定义的
- 邮件黑猩猩的形式在引导-按钮移动
- 点击离子导航条上的按钮移动到新页面的所有3种方式都不起作用
- 如何将选中的单选按钮移动到左侧
- 在openart 2.0中，搜索按钮移动到顶部栏
- 如何将我的+按钮移动到网页右侧
- 检测用户是否点击了“后退”按钮——移动浏览器
- 如何在单击时将按钮移动(设置动画）到特定位置，并在单击其他位置时返回到原始位置
- Facebook“分享”按钮;移动web的html/javascript
- 根据我悬停在上面的按钮移动相同的图像
