javascript - 如何在 WordPress 中使用 jQuery 创建 Accordion ？

Question

我正在尝试创建一个与大多数 Accordion 有点不同的 Accordion 。

我正在尝试做的事情:

• 有一个标题，当点击时，描述会显示在整个页面的宽度上
• 我想将标题在屏幕上分成三列；因此标题不会跨越页面的宽度

基本上是在寻找这样的东西:

如您所见，这与大多数情况略有不同。我找到了一个类似于我正在尝试做的事情的现场演示，可以找到 here .

到目前为止我做了什么:

我一直在使用 Cherry Framework 并使用短代码来尝试让它工作，但是当我尝试从标题中扩展描述时遇到了问题。不确定是否有办法编辑 accordian 短代码以允许描述是否全宽，但我认为那将是理想的。

到目前为止，这是我的代码:

    [tabs direction="top" tab1="the first tab" tab2="the second tab" tab3="the third tab"]
[tab1]

[row]

[span4]

[accordion title="Title 1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]

[/span4]

[span4]

[accordion title="Title 2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[/row]

[row]

[span4]

[accordion title="Title 4"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 5"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 6"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]
[/row]

以下是我的截图:

就像我说的，我现在正在使用简码来做到这一点。我确信有一种更简单的方法可以做到这一点，这样我就不会遇到描述文本未跨越页面宽度的问题。

Answer 1

下面是一个示例，请检查代码。

$(document).ready(function(){
    $('.main ul li').click(function(){
      $('.main ul li').removeClass('active');
      $(this).addClass('active');
      $('.main ul li').css('margin-bottom','1%');
      $('.innerBox').hide();
      var boxHeight=$(this).children('.innerBox').innerHeight();
      $(this).css('margin-bottom', boxHeight);
      $(this).children('.innerBox').slideDown();
      var widthUL = $('.main ul').width() - 10;
      var test = $(this);
      var leftUL = test.position().left;
      $('.innerBox').css({'width': widthUL,'margin-left':- leftUL});      
    });
  });

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
.clrfix:after{
  content:'';
  clear:both;
  display:block;
}
.main{
  width:900px;
  margin:0 auto;
  border:1px solid #ccc;
  position: relative;
  overflow:hidden;
}
.main ul li{
  padding:.5%;
  width:31%;
  border:1px solid #ccc;
  list-style:none;
  margin:1%;
  display:inline-flex;
  position: relative;
  border-radius:5px;
}
.main ul li.active{
  background:#d7e3de;
  border:1px solid #333;
  border-bottom:none;
  padding:1%;
  border-radius:0;
}
.main ul li.active .innerBox{
  top:37px;
}
.main ul li .innerBox{
  background:#d7e3de;
  position:absolute;
  left:-1px;
  display:none;
  top:38px;
  z-index:1;
  border:1px solid #333;
  padding:10px;
  min-height:20px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="main">
    <ul class="clrfix">
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat caborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>

      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>

      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>

    </ul>
  </div>

希望能帮到你