點擊摺疊行

Question

我正在處理此代碼，但我在正確實施時遇到困難。我想將箭頭放在問題的前面，並將點擊事件與文本同步。

jsfiddle.net/tx8paL7L/5/

你能幫我解決這個問題？

HTML：

<div class="container faq_wrapper"> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <p> 
       &nbsp;</p> 
      <div class="faq-all-actions"> 
       <a class="faq-expand">Expand All</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="faq-collapse">Collapse All</a></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <div class="question-wrapper"> 
       <div class="arrows"> 
        &nbsp;</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&#39;ll have instant access to all features for 30 days, absolutely free. We don&#39;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'); 
}); 
; 

Answer 1

這裏是一個工作撥弄你的JavaScript來 「之前.arrow ::」，將CSS還需要一些工作：

JSFiddle

基本上你使用了錯誤的選擇爲您jQue RY。

HTML：

<div class="container faq_wrapper"> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <p> 
       &nbsp;</p> 
      <div class="faq-all-actions"> 
       <a class="faq-expand">Expand All</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="faq-collapse">Collapse All</a></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <div class="question-wrapper"> 
       <div class="arrows"> 
        &nbsp;</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&#39;ll have instant access to all features for 30 days, absolutely free. We don&#39;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'); 
    }) 

}); 

Answer 2

爲了把箭頭的問題Y的前您可以同時使用權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; 
} 

當你在佈局絕對位置的元素，你可以「修復」相對於父元素，如果你想（上，下，左，右）。

Answer 3

你已經添加了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

Answer 4

加入 「左：190px」

.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; 
}