jQuery手风琴-移动选定的一个
jQuery Accordion - Move the selected one up
伙计们,我在做一个jQuery手风琴之类的东西使用幻灯片函数。它的工作很好,但我使用这个项目,这需要我移动选定的一个或第一个。
这是我的HTML和jQuery<ul class="inneraccordion">
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_offers"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Offers (3)</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_play"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Set Top Box</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_sim"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Sim Cards</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_voucher"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Vouchers</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_pin"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">E-Pins</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-layers"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Bundles</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
</ul>
jQuery - jQuery(document).ready(function($) {
var open = $('.open'),
a = $('ul').find('a');
console.log(a.hasClass('active'));
open.click(function(e){
e.preventDefault();
var $this = $(this),
speed = 500;
if($this.hasClass('active') === true) {
$this.removeClass('active').next('.inneraccordionbox').slideUp(speed);
} else if(a.hasClass('active') === false) {
$this.addClass('active').next('.inneraccordionbox').slideDown(speed);
} else {
a.removeClass('active').next('.inneraccordionbox').slideUp(speed);
$this.addClass('active').next('.inneraccordionbox').delay(speed).slideDown(speed);
}
});
});
CSS incase -
/* inner accordion */
.acc_head {
height: 90px;
border-bottom: 1px solid #e1e9ec;
}
.icon-divider, .acc_head_text {
display: flex;
align-items: center;
height: 90px;
padding:0 20px;
}
.icon-divider {
border-right: 1px solid #ececec;
}
.icon-divider div {
margin: 0 auto;
}
.icon-divider div::before {
font-size: 44px;
color:#3fb3ec;
}
.acc_head_text {
background: url('../images/plus.png') no-repeat 97% 35px !important;
-webkit-transition: 0.5s;
color:#444444;
font-family: "Gotham Medium", Arial, Helvetica, sans-serif !important;
font-size: 20px;
}
a.active .acc_head_text {
background: url('../images/cross.png') no-repeat 97% 35px !important;
-webkit-transition: 0.5s;
}
.inneraccordionbox {
height:300px;
position:relative;
display:none;
padding: 0px;
}
.inneraccordion li {
background: #fff;
display:block;
padding-right:10px;
list-style:none;
border: 1px solid #e1e9ec;
border-bottom: none;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 3px 1px 0px rgba(221,222,224,1);
-moz-box-shadow: 0px 3px 1px 0px rgba(221,222,224,1);
box-shadow: 0px 3px 1px 0px rgba(221,222,224,1);
margin-bottom: 10px;
}
.inneraccordion li:last-child {
margin-bottom: 0;
}
你知道怎么做吗?
我在这个- else if(a.hasClass('active') === false)
条件中添加了以下代码。它将所选元素1的位置向上移动
li = $(this).parent();
li.insertBefore(li.prev(li));
li.slideUp(500, function(){
//callback
}).slideDown(500);
要将选定的元素移动到列表的顶部,将li.insertBefore(li.prev(li));
更改为li.insertBefore(li.siblings(":eq(0)"));
相关文章:
- 链接到手风琴中的另一个选项卡,嵌入的链接将不起作用
- Bootstrap折叠手风琴一个面板打开,所有其他面板关闭
- 如果一个手风琴发出咔嗒声,如何最大限度地减少其他手风琴
- 从另一个页面链接到手风琴的一部分
- Jquery手风琴html表显示了一个<tbody>内容
- 使用jQuery删除最后一个手风琴
- AngularJS - 我需要一个手风琴,可以选择在当时打开多个面板.
- 我做了一个手风琴菜单,但没有子菜单的链接不起作用.
- 让我的button type="submit"打开另一个手风琴
- 如何在另一个手风琴列表中创建手风琴列表(2级)
- 添加一个手风琴在谷歌地图infoBubble(从谷歌地图实用程序库)
- 如何在打开另一个手风琴文本之前关闭手风琴元素
- 将jquery手风琴元素从一个手风琴移动到另一个手风琴
- 怎么一次只能打开一个手风琴呢
- 展开视图中的一个手风琴项目
- 为移动网站 jquery 和 CSS 创建一个手风琴菜单
- 当我打开一个手风琴时,如何在多个部分中关闭所有其他手风琴.
- 当另一个手风琴打开时如何关闭.
- 点击另一个手风琴打开
- 手风琴可以在移动设备上关闭所有部分,但在平板电脑和台式机上总是打开一个手风琴部分