Question

我正在使用JQuery UI手风琴插件来显示和隐藏文本块。这很好用。但是，我想知道如何在标题下显示一些文本，以便我的用户可以了解其中的内容而不必打开每个文本并查看？例如，显示前两个<p>标签然后允许他们点击查看其余标签会很不错。

我已经看过这个answer但它适用于自定义手风琴，而不是我更喜欢使用的JQuery UI。

有什么想法吗？

Answer 1

利用jQ UI tooltip widget，您可以在鼠标悬停在其兄弟标题上时抓取相关的手风琴内容DIV，然后加载其内容包含子元素的工具提示显示。

在该演示中，为了显示前两个<p>标签的内容，我做了以下内容：

$(function () {
    $("#accordion").accordion();
    $(document).tooltip({
        items: "#accordion > h3",
        content: function () {
            var ElemsToPreview = $(this).next().children().slice(0,2);
            var TooltipContents = '';
            $(ElemsToPreview).each(function(index) {
                TooltipContents += $(this).html();
                if(index==0)
                    TooltipContents += "<br/><br/>";
            });
            return "<div>" + TooltipContents + "</div>";
        }
    });
});

items属性允许我设置文档中的哪些项应该注册工具提示，而content属性允许我定义动态生成工具提示内容的匿名函数。

在该函数中，我抓住与该手风琴部分对应的<div>的前两个孩子：

var ElemsToPreview = $(this).next().children().slice(0,2);

然后我抓住两个孩子中的每一个的HTML内容并将它们附加到一个变量中，中间有一个换行符以确保它们在渲染的工具提示中保持分离;

var TooltipContents = '';
$(ElemsToPreview).each(function(index) {
    TooltipContents += $(this).html();
    if(index==0)
        TooltipContents += "<br/><br/>";
});

然后我返回一个包含我想要的工具提示内容的<div>：

return "<div>" + TooltipContents + "</div>";

根据此标记构建：

<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque.</p>
        <p>Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.</p>
        <p>Proin viverra leo utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
    <h3>Section 2</h3>
    <div>
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit ametpurus.</p>
        <p>Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitorvelit, faucibus interdum tellus libero ac justo.</p>
        <p>Vivamus non quam. Insuscipit faucibus urna.</p>
    </div>
    <h3>Section 3</h3>
    <div>
        <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.</p>
        <p>Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac liberoac tellus pellentesque semper.</p>
        <p>Sed ac felis. Sed commodo, magna quislacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3>Section 4</h3>
    <div>
        <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netuset malesuada fames ac turpis egestas.</p>
        <p>Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p>
        <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.</p>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, perinceptos himenaeos.</p>
    </div>
</div>

如何让JQuery UI Accordion预览一些文字？

1 个答案: