如何在WordPress中使用jQuery創建手風琴？

Question

我正在嘗試創造一種與大多數人略有不同的手風琴。

我想做什么：

• 有一個標題 ，當點擊時，頁面的寬度上會顯示一個描述
• 我希望將標題分成三列; 因此標題不會跨越頁面的寬度

基本上尋找這樣的東西：

正如您所看到的，這與大多數情況略有不同。 我發現了一個類似於我想要的東西的現場演示，這可以在這里找到。

到目前為止我做了什么：

我一直在使用Cherry Framework並使用短代碼來嘗試使其工作，但是當我嘗試從標題中擴展描述時遇到了問題。 不確定是否有一種方法可以編輯手風琴短代碼，以使描述符合全寬，但我認為這是理想的。

這是我到目前為止的代碼：

    [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> 

我希望我會幫助你

Answer 2

如果你使用與標題相同的描述，那么它將會出現的不是100％，而是與標題相同的寬度。 我不知道wordpress是如何工作的，但是在簡單的html和css中這可能有效。

如果這不起作用，你可以嘗試在css中使它們成為列

例如，這將使2列在它們之間具有1px的藍色實線。

  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count:2 ; /* Firefox */
  -webkit-column-width: 50%; /* Chrome, Safari, Opera */
  -moz-column-width: 50%; /* Firefox */
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
  -moz-column-rule-style: solid; /* Firefox */
  -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
  -moz-column-rule-width: 1px; /* Firefox */
  -webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
  -moz-column-rule-color: blue; /* Firefox */

這不是真正的CSS，但它可以在Firefox，Chrome，Safari和歌劇IE中工作，但我發現這個做的事情就像我所知道的那樣。