[英]How to use jquery to move a div to the top of a element and the other two to the bottom
嘿,我正在制作此手风琴,当您在顶部选择一个选项时,必须显示其他三个面板之一。 为此,我想将DOM中的面板移动到树的顶部。 但是,其他两个必须移到底部。 现在,它只是切换到三个中的一个,但是如果我选择一个新的,它不会更新,因此我确定dom混合在一起了。
HTML
<button class="accordion" id="special_accord">
<h2 class="float-left">2.</h2>
<h2 class="text-center">Model</h2></button>
<div class="panel" id="default_panel">
<label>
<h3 class="text-center">Please select a Device Type above</h3></label>
</div>
<div class="panel" id="laptop_panel">
<div id="col1">
<label class="control control--radio">LAPTOP
<input type="radio" name="radio-model" value="laptop1" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">LAPTOP2
<input type="radio" name="radio-model" value="laptop2" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">LAPTOP3
<input type="radio" name="radio-model" value="laptop3" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel" id="tablet_panel">
<div id="col1">
<label class="control control--radio">iPad 2
<input type="radio" name="radio-model" value="tablet-ipad2" onclick="calculateTotal()" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad 3
<input type="radio" name="radio-model" value="tablet-ipad3" onclick="calculateTotal()" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad 4
<input type="radio" name="radio-model" value="tablet-ipad4" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Air
<input type="radio" name="radio-model" value="tablet-ipadAir" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Mini
<input type="radio" name="radio-model" value="tablet-ipadMini" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Mini 2
<input type="radio" name="radio-model" value="tablet-ipadMini2" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Nexus 7
<input type="radio" name="radio-model" value="tablet-nexus7" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Amazon Fire
<input type="radio" name="radio-model" value="tablet-amazonFire" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Amazon Kindle
<input type="radio" name="radio-model" value="tablet-amazonFire" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel" id="phone_panel">
<div id="col1">
<label class="control control--radio">iPhone 3 & 4
<input type="radio" name="radio-model" value="phone-iphone3" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 5, 5c, 5s
<input type="radio" name="radio-model" value="phone-iphone5cs" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 6
<input type="radio" name="radio-model" value="phone-iphone6" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 6 Plus
<input type="radio" name="radio-model" value="phone-iphone6+" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Microsoft Lumia 430
<input type="radio" name="radio-model" value="phone-lumia430" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Galaxy S3
<input type="radio" name="radio-model" value="phone-galaxys3" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Galaxy S4
<input type="radio" name="radio-model" value="phone-galaxys4" />
<div class="control__indicator"></div>
</label>
</div>
</div>
CSS
.icon-select {
margin-right: 20px;
margin-left: 20px;
}
#col1 {
float: left;
width: 33%;
height: 100%;
}
#col2 {
float: center;
height: 100%;
width: 33%;
overflow: hidden;
display: table-cell;
}
#col3 {
float: right;
height: 100%;
width: 34%;
margin-left: 20px;
overflow: hidden;
display: table-cell;
}
#price_tally {
float: right;
display: inline-block;
border: 1px solid #6fdd7a;
padding-top: 10px;
border-radius: 2px;
background-color: #6fdd7a;
}
#price_tally hr {
border: 1px solid #ffffff;
margin: 0px;
}
#money_tally {
text-align: center;
font-size: 3em;
padding: 0px;
margin: 0px;
color: #ffffff;
}
#price_tally button {
width: 100%;
height: 100%;
margin: 0px;
padding: 16px;
font-size: 26px;
background-color: #6fdd7a;
color: #ffffff;
border: none;
outline: none;
cursor: pointer;
}
#price_tally button:hover {
background-color: #65c76f;
}
button.accordion {
background-color: #ffffff;
color: #444;
cursor: pointer;
padding: 2px;
width: 50%;
text-align: left;
outline: none;
transition: 0.4s;
border-left: 1px solid #6fdd7a;
border-right: 1px solid #6fdd7a;
border-top: 1px solid #6fdd7a;
border-radius: 4px;
border-bottom: none;
}
button.accordion.active,
button.accordion:hover {
background-color: #6fdd7a;
color: #ffffff;
}
div.panel {
padding: 0px 18px;
background-color: #ffffff;
max-height: 0;
overflow: hidden;
width: 46%;
border-right: 1px dotted #6fdd7a;
border-left: 1px dotted #6fdd7a;
transition: max-height 0.2s ease-out;
}
#optional_panel {
border-bottom: 1px solid #6fdd7a;
}
label > input {
visibility: hidden;
position: absolute;
}
label > input + img {
cursor: pointer;
border: 2px solid transparent;
border-radius: 2px;
-webkit-transition: all 0.25s linear;
}
label > input:checked + img {
background-color: #6fdd7a;
}
.invisible {
display: none;
}
div.showing {
padding: 0px 18px;
background-color: #ffffff;
max-height: 600px;
overflow: hidden;
width: 46%;
max-height: 100%;
border-right: 1px dotted #6fdd7a;
border-left: 1px dotted #6fdd7a;
transition: max-height 0.2s ease-out;
}
.control {
font-size: 18px;
position: relative;
display: block;
margin-bottom: 15px;
padding-left: 30px;
cursor: pointer;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control__indicator {
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
}
.control--radio .control__indicator {
border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
background: #444;
}
.control input:checked ~ .control__indicator {
background: #6fdd7a;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
background: #6fdd7a;
}
.control__indicator:after {
position: absolute;
display: none;
content: '';
}
.control input:checked ~ .control__indicator:after {
display: block;
}
.control--checkbox .control__indicator:after {
top: 4px;
left: 8px;
width: 3px;
height: 8px;
transform: rotate(45deg);
border: solid #fff;
border-width: 0 2px 2px 0;
}
.control--checkbox input:disabled ~ .control__indicator:after {
border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
top: 7px;
left: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
background: #7b7b7b;
}
JS
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
};
}
var def = $("#special_accord");
var lap = $("#laptop_panel");
var tab = $("#tablet_panel");
var pho = $("#phone_panel");
$("#laptop_button").click(function () {
lap.before().insertAfter(def);
});
$("#tablet_button").click(function () {
tab.before().insertAfter(def);
});
$("#phone_button").click(function () {
pho.before().insertAfter(def);
});
这可能无法真正回答您的问题。 但这是否接近您的目标? 我不太确定你在这里的目标。
$(".accordion").on("click", function(e){
$(".panel").hide();
console.log("selected: ", $(this).attr("data-model"));
var model = $(this).attr("data-model");
if (model) {
$( "#" + model + "_panel").show("slow");
}
else {
$("#default_panel").show("slow");
}
});
// hide all panels
$(".panel").hide();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.