如何在WordPress中使用jQuery创建一个手风琴？
我正在努力创作一种与大多数人略有不同的手风琴。
我要做的是：
- 拥有标题，点击后会在页面宽度上显示说明
- 我希望将标题分为三列;因此标题不会跨越页面的宽度
基本上寻找这样的东西：
正如您所看到的，这与大多数情况有所不同。我发现了一个类似于我想要做的事情的现场演示，可以找到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]
以下是我所拥有的截图：
就像我说的那样，我现在正在使用短代码执行此操作。我确信有一种更简单的方法可以做到这一点，我不会遇到描述文本没有跨越页面宽度的问题。
2 个答案:
答案 0 :(得分：11)
下面是一个示例，请检查代码。
$(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>
我希望我会帮助你
答案 1 :(得分：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和Opera中使用IE无法正常工作，但我发现this的功能与我所知的相同。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？