我正在研究这段代码,但我很难正确实施。我想把箭头放在问题的前面,并将click事件与文本同步。
jsfiddle.net/tx8paL7L/5 /
你能帮我解决这个问题吗?
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow"></div><h6>Can I try the software before I buy it?</h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply <a href="/trial">download a free trial</a> and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.answer-wrapper {
display: none;
}
.arrow {
margin: 1em;
}
.arrow::before {
position: absolute;
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
}
.arrow.down::before {
transform: rotate(90deg);
transition: transform .25s;
}
JavaScript的:
$(document)
.on('click','.row',function(){
$(this).find('.answer-wrapper').slideToggle();
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
})
var arr = document.querySelector('.arrow');
arr.addEventListener('click', function(event) {
event.target.classList.toggle('down');
});
;
答案 0 :(得分:2)
这是你的javascript工作小提琴,css仍需要一些工作:
基本上你的jQuery使用了错误的选择器。
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow"></div><h6>Can I try the software before I buy it?</h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply <a href="/trial">download a free trial</a> and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
jQuery的:
$(document).ready(function() {
.on('click','.row .question-wrapper',function(){
$(this).find('.answer-wrapper').slideToggle();
$('.arrow').toggleClass('down');
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
$('.arrow').addClass('down');
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
$('.arrow').removeClass('down');
})
});
答案 1 :(得分:1)
您已添加position:absolute
但未对箭头进行任何操作。
添加以下样式:
.arrow {
position:relative; // you need to add position relative
margin: 1em;
padding-left:10px;
}
.arrow::before {
position: absolute;
left:100%; // define where you would like the arrow to be placed .
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
}
使用位置relative
和left
来完美定位箭头。
<强> FIDDLE HERE 强>
答案 2 :(得分:0)
要将箭头放在问题前面,你可以使用正确的0:
.arrow::before {
position: absolute;
right: 0;
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
}
当您在位置绝对位置上布置元素时,您可以根据需要(顶部,底部,右侧,左侧)“固定”相对于父级的元素。
答案 3 :(得分:0)
添加&#34;左:190px&#34; to&#34; .arrow :: before&#34;
.arrow::before {
position: absolute;
content: '';
width: 0;
height: 0;
border: .5em solid transparent;
border-left-color: gray;
transform-origin: 0 50%;
transition: transform .25s;
left: 190px;
}