单击时折叠行

时间:2015-05-29 19:01:34

标签: javascript html html5 css3

我正在研究这段代码,但我很难正确实施。我想把箭头放在问题的前面,并将click事件与文本同步。

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');
});
;

4 个答案:

答案 0 :(得分:2)

这是你的javascript工作小提琴,css仍需要一些工作:

JSFiddle

基本上你的jQuery使用了错误的选择器。

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');
    })

});

答案 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;
}

使用位置relativeleft来完美定位箭头。

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