0

我一直在尝试使用 javascript 进行手风琴运动。

如果它已经打开并保持关闭状态，我遇到的问题是关闭。

现在，当我单击不同的 div 时，相应的关闭一个并打开另一个。

我看到这个论点总是解决为真，因为我正在删除课程。但我似乎无法找到解决这个问题的方法，所以我可以有一个不错的手风琴。

<div class="speaker-container">
<div class="span3 offset1 speaker" id="sp-info-0">
    <div class="speaker-img">
        <div class="hover"></div>
        <img src="" alt="">
    </div>
     <h4>Title</h4>

</div>
<div class="speaker-info" id="sp-info-0">
    <button class="close-speaker">Close</button>
     <h2>Title</h2>

</div>
<div class="span3 offset1 speaker" id="sp-info-1">
    <div class="speaker-img">
        <div class="hover"></div>
        <img src="" alt="">
    </div>
     <h4>Sub Title</h4>

</div>
<div class="speaker-info" id="sp-info-1">
    <button class="close-speaker">Close</button>
     <h2>Title</h2>

</div>
<div class="span3 offset1 speaker" id="sp-info-2">
    <div class="speaker-img">
        <div class="hover"></div>
        <img src="" alt="">
    </div>
     <h4>Title</h4>

</div>
<div class="speaker-info" id="sp-info-2">
    <button class="close-speaker">Close</button>
     <h2>Title</h2>

</div>
</div>

var timer;

$('.speaker-container .speaker').on('click', function(){
var speakerContainer = document.getElementsByClassName('speaker-container');
var self = this;
var children = $('.speaker-container').children();
var selfHeight = this.clientHeight;
var parentOffset = this.parentElement.offsetHeight;
var selfOffset = this.nextElementSibling.offsetHeight;

console.dir(children);
console.log(parentOffset);


$('.speaker-container').removeClass('open').css({'height' : selfHeight + 'px'});

for (var i = 0; i < children.length; i++) {

  if (children[i].className == 'speaker-info fade') {
    console.dir(children[i]);
    $(children[i]).removeClass('fade');
  }
}


if (self.parentElement.className !== 'speaker-container open' && self.nextElementSibling.className !== 'speaker-info fade') {

timer = setTimeout(function(){

    self.parentElement.setAttribute('class' , 'speaker-container open');
    self.parentElement.style.height = selfOffset + selfHeight + 'px';
    self.nextElementSibling.style.top = selfHeight + 'px';
    self.nextElementSibling.setAttribute('class' , 'speaker-info fade');
    // return false;

  }, 500); 

} else {

  $('.speaker-container').removeClass('open').css({'height' : selfHeight + 'px'});
  self.nextElementSibling.setAttribute('class' , 'speaker-info');

  window.clearTimeout(timer);
}

  });
4

1 回答 1

1

创建一个打开项目的类。（假设课程是“开放的”）

创建一个关闭项目的类。（假设课程已关闭”）

假设所有的手风琴项目都在手风琴类中。

打开项目的功能：循环并删除任何现有的打开项目类，添加封闭类。
将公开课添加到所选项目。

默认情况下，为所有项目提供封闭类（除了您想要默认打开的项目，如果有的话）

使用 javascript 它看起来像：

function openOnClick()
{
var openaccordion=document.getElementsByClassName('open');
openaccordion.className.replace( /(?:^|\s)open(?!\S)/g , 'close' );
this.className.replace( /(?:^|\s)close(?!\S)/g , 'open' );
}

使用 jQuery，它看起来像这样：

$('div.accordion').click(function(){
    $('.open').removeClass('open').addClass('close');
    $(this).removeClass('close').addClass('open');
}

您也可以使用 jqueryui 在其中非常简单地获得一些滑动效果：

$(this).switchClass('close','open',1000);
于 2013-10-07T20:18:40.837 回答