Question

我有一个jQuery手风琴，当我需要在其中一个滑动开放区域放置一个div标签时会断开..我该如何解决这个问题？我需要放一个div-tag，因为我无法用span-tag制作一个漂亮的盒子。有人知道解决这个问题吗？

请在此处查看我的演示，了解它的中断位置:(

http://jsfiddle.net/zRqYM/

Answer 1

这似乎有点蹩脚，但您可以使用span并将其设置为display: block。然后它基本上是div：http://jsfiddle.net/zRqYM/5/

Answer 2

为什么你不能把它放在一个范围内，并将跨度设计成带有显示块的漂亮盒子？

Answer 3

您可以使用span-tag。您需要做的就是在css

中为span-tag类添加以下样式

.whatever {
    border: 1px solid #000;
    display: inline-block;
    margin: 0 5px;
}

Answer 4

你应该改变这个：

$(this).next("p").slideToggle("slow")
       .siblings("p:visible").slideUp("slow");

为：

$(this).next("div").slideToggle("slow")
       .siblings("div:visible").slideUp("slow");

和CSS：

.accordion2 > div {
    background: #f7f7f7;
    /* etc... */

如果您想将其他元素放在可扩展内容中，则使用DIV代替P会更有意义：http://jsfiddle.net/zRqYM/13/

或者只是在P标记内使用内联元素并将其设置为display:block;，但它对我来说并不具有语义意义。

Answer 5

有一种不同的方式来尝试你的手风琴而不会搞乱CSS

按照以下步骤完成HTML;

<div id='accordion'>
 <h3>Title of the view</h3>
 <div>
  all the stuff you want to do here
 </div>
 <h3>Title of the view</h3>
 <div>
  all the stuff you want to do here
 </div>
</div>

并将您的脚本文件设为

 $('#accordion').accordion({ active: 0 });

有关详情，请访问http://jqueryui.com/demos/accordion

Answer 6

我已更新您的jsfiddle：http://jsfiddle.net/zRqYM/21/并将您的p代码更改为div代码，因为它允许最多代码嵌套。

作为一般规则，div代码不能位于p代码内，因为它会导致p代码自行关闭。

Div打破jQuery手风琴

6 个答案: