Question

我有三个手风琴部分，当我第一次到达页面时，我希望第一个打开（其他两个关闭）。我给了所有三个（也就是＆＃39; accordionSectionContent＆＃39;如下所示）单独的ID（在他们的共享班级＆＃39; accordionSectionContent＆＃39;之上）和我说的第一个：

#accordion1 {
display:block;
}

一切都很好，除非我在开头点击它的标题（即使它已经打开），它会关闭然后再次反弹。如果我再次按它，它不会再次反弹但会关闭。问题必须与以下代码（请修改和教育）：

相关的jQuery：

$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordionSectionTitle').removeClass('active');
$('.accordion .accordionSectionContent').slideUp(300).removeClass('open');
}

$('.accordionSectionTitle').click(function(e) {
    var currentAttrValue = $(this).attr('href');

    if($(e.target).is('.active')) {
    close_accordion_section();
    }else {
    close_accordion_section();

    $(this).addClass('active');
    $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
    });
});

HTML如下：

<div class="accordion">

<div class="accordionSection"><a class="accordionSectionTitle" href="#accordion1" id="accordionSectionTitle1">Info</a>
<div id="accordion1" class="accordionSectionContent">
<p>Helpful info</p>
</div>
</div>

<div class="accordionSection"><a class="accordionSectionTitle" href="#accordion2" id="accordionSectionTitle2">How long will it take?</a>
<div id="accordion2" class="accordionSectionContent">
<p>An estimate of time</p>
</div>
</div>

<div class="accordionSection"><a class="accordionSectionTitle" href="#accordion3" id="accordionSectionTitle3">How do I?</a>
<div id="accordion3" class="accordionSectionContent">
<p>.</p>
</div>
</div>

</div>

Answer 1

我创造了一个小提琴。

https://jsfiddle.net/u6y7ezz4/1/

你可能会感到沮丧，但是你错过了一个空间：）

在你的函数close_accordion_section

中

Scheduler scheduler = Schedulers.from(Executors.newSingleThreadExecutor());
Observable.interval(x, TimeUnit.SECONDS)
.flatMap(n -> 
    service.getAthletes()
        .retry(3)
        .subscribeOn(scheduler))
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Action1<List<Athlete>>() {
        @Override
        public void call(List<Athlete> athletes) {
            // Handle Success
        }
    }, new Action1<Throwable>() {
        @Override
        public void call(Throwable throwable) {
            // Handle Error
        }
    });

您在.accordion和.accordionSectionContent

之间的第二行缺少空格

修复方法是：

function close_accordion_section() {
     $('.accordion .accordionSectionTitle').removeClass('active');
     $('.accordion.accordionSectionContent').slideUp(300).removeClass('open');
}

Answer 2

看看这是否是你想要完成的事情。

＆＃13;

var headers = $('.accordion-section a');
var contentAreas = $('.accordion-section-content').hide();
var firstContentAreas = $('.accordion-section-content').hide().first().show();

headers.click(function(e) {

  e.preventDefault();
  var panel = $(this).parent('div').next('div');
  var isOpen = panel.is(':visible');

  contentAreas.slideUp();
  panel[isOpen ? 'slideUp' : 'slideDown']()
    .trigger(isOpen ? 'hide' : 'show');

  $('.accordion-section a').not(this).removeClass('accordion-section-title');
  $(this).toggleClass('accordion-section-title');


  return false;
});

＆＃13;

.accordion {
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background: #f5f5f5;
  border: 1px solid #444;
  border-radius: 0px;
  font-family: "Verdana";
}
.accordion-section {
  clear: both;
  text-align: left;
  border: 2px solid #444;
  min-width: 200px;
  min-height: 40px;
  color: #fff;
  background: #444;
  display: block;
  font-weight: 400;
  padding: 10px 10px;
}
.accordion-section a,
.accordion-section a:active,
.accordion-section a:visited {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px;
}
.accordion-section-content {
  padding: 5px 15px;
  line-height: 1.5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">
  <div class="accordion-section"> <a href="#accordion-1" class="accordion-section-title">Accordion Section #1</a>

  </div>
  <div id="accordion-1" class="accordion-section-content">
    <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras
      tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
  </div>
  <!--end .accordion-section-content-->
  <!--end .accordion-section-->
  <div class="accordion-section"> <a href="#accordion-2" class="accordion-section-title">Accordion Section #2</a>

  </div>
  <div id="accordion-2" class="accordion-section-content">
    <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras
      tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
  </div>
  <!--end .accordion-section-content-->
  <!--end .accordion-section-->
  <div class="accordion-section"> <a href="#accordion-3" class="accordion-section-title">Accordion Section #3</a>

  </div>
  <div id="accordion-3" class="accordion-section-content">
    <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicu.</p>
    <!--accordion-section-content-->
    <!--end .accordion-section-->
  </div>
  <!--end .accordion-->

＆＃13;

Jquery手风琴部分在我关闭它时会弹回

2 个答案: