Question

我有一些问题我是javascript的新手，无法处理多级嵌套块：我需要使用toogle和mootools打开嵌套块。我发现了一些像accorodion这样的例子，但我需要对嵌套块进行toogle效果。你能帮助我吗？谢谢。 1）这里我在jquery上找到的例子，我需要相同的但是在mootools上

＆＃13;

$('.nested-accordion').find('.comment').slideUp();
$('.nested-accordion').find('h3').click(function(){
  $(this).next('.comment').slideToggle(100);
  $(this).toggleClass('selected');
});

＆＃13;

* {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-size: 1em;
  font-family: Calibri, Arial, sans-serif;
}

.container {
  margin: 0 auto;
  width: 80%;
}

.nested-accordion {
  margin-top: 0.5em;
  cursor: pointer;
}
.nested-accordion h3 {
  padding: 0 0.5em;
}
.nested-accordion .comment {
  line-height: 1.5;
  padding: 0.5em;
}
.nested-accordion h3 {
  color: #47a3da;
}
.nested-accordion h3:before {
  content: "+";
  padding-right: 0.25em;
  color: #becbd2;
  font-size: 1.5em;
  font-weight: 500;
  font-family: "Lucida Console", Monaco, monospace;
  position: relative;
  right: 0;
}
.nested-accordion h3.selected {
  background: #47a3da;
  color: #fff;
}
.nested-accordion h3.selected:before {
  content: "-";
}
.nested-accordion .comment {
  color: #768e9d;
  border: 0.063em solid #47a3da;
  border-top: none;
}
.nested-accordion a {
  text-decoration: none;
  color: #47a3da;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class='nested-accordion'>
    <h3>Heading</h3>
    <div class='comment'>
      This is a comment 
      <div class='nested-accordion'>
        <h3>Heading</h3>
        <div class='comment'>
          This is a another content which is really long and pointless but keeps on going and it technically a run-on sentence but here is a link to google to distract you -> <a href='http://google.com' target='_blank'>link</a>
          <div class='nested-accordion'>
            <h3>Heading</h3>
            <div class='comment'>This is a another content</div>
          </div>
          <div class='nested-accordion'>
            <h3>Heading</h3>
            <div class='comment'>This is a another content</div>
          </div>
        </div>
      </div>
      <div class='nested-accordion'>
        <h3>Heading</h3>
        <div class='comment'>This is a another content</div>
      </div>
    </div>
  </div>
  <div class='nested-accordion'>
    <h3>Heading</h3>
    <div class='comment'>This is a another content</div>
  </div>
</div>

＆＃13;

Answer 1

我喜欢的一个Mootools功能是Reveal。

这可以显示上/下或左/右。

element.toggle（）将捕捉到相反的状态（如果打开，将关闭而不进行动画制作等）。否则，element.reveal（）或element.dissolve（）将打开/关闭。

在你的情况下，你会想要像：

var container = document.getElement('.container');
Array.each(container.getElements('.comment'), function(comment){
  comment.set('reveal', {duration: 250}).toggle();
  if(comment.getPrevious('h3')){
    comment.getPrevious('h3').addEvent('click', function(e){
      var comment = e.target.getNext('.comment');
      if(comment.getStyle('display')==='block'){
        e.target.getNext('.comment').dissolve();
      }else{
        e.target.getNext('.comment').reveal();
      }
    });
  }
});

我在这里使用Mootools长手法（避免使用美元），这样你就可以和其他框架（比如jQuery）一起玩。

Mootools文档非常好，但可能需要一些试验和错误;）

Mootools Reveal

以下是HTML / CSS的示例：

JSFiddle Example

我希望这有帮助！

在mootols中多级下拉

1 个答案: