0

我正在为 jQuery 使用 Kwicks 进行垂直下拉：http: //www.jeremymartin.name/projects.php? project=kwicks

看一下标记：

<ul class="kwicks">
    <li id="kwick1">
        <div class="title">Title 1</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
        <div class="item"><b>Item 3</b> Description 3</div>
        <div class="item"><b>Item 4</b> Description 4</div>
    </li>
    <li id="kwick2">
        <div class="title">Title 2</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
        <div class="item"><b>Item 3</b> Description 3</div>
        <div class="item"><b>Item 4</b> Description 4</div>
        <div class="item"><b>Item 5</b> Description 5</div>
        <div class="item"><b>Item 6</b> Description 6</div>
    </li>
    <li id="kwick3">
        <div class="title">Title 3</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
    </li>
    <li id="kwick4">
        <div class="title">Title 4</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
        <div class="item"><b>Item 3</b> Description 3</div>
        <div class="item"><b>Item 4</b> Description 4</div>
    </li>
</ul>

Javascript：

$().ready(function() {
    $('.kwicks').kwicks({
        min : 15,
        spacing : 9,
        isVertical : true,
        sticky : true,  
        event : 'click' 
    });
});

在这里看到它：http: //jsfiddle.net/6xL5M/3/

如您所见，它们具有不同的内容大小，并且默认情况下，jQuery 的 Kwicks 都以相同的大小显示，难道没有办法让每个人都有自己的高度吗？

非常感谢提前。

4

3 回答 3

2

我只是花时间浏览 Kwicks 并在我自己的沙箱上处理代码，以便弄清楚如何为每个 li 制作一个具有不同高度的列表（当不处于活动状态时）。

不幸的是，答案是 kwicks 库不支持。我想出了两种不同的方式。首先我查看了 API --- 这个设置没有配置。其次，我尝试在 Kwicks 之上使用 CSS 获得结果，但是 Kwicks 库在其计算中不考虑我的任何 CSS，因此元素最终位于其他元素之上（错误）。

如果你想要那种类型的功能，你要么必须扩展 Kwicks 库，要么只编写自己的代码来做到这一点。

于 2012-10-07T22:06:07.567 回答
2

@richardaday 的答案是正确的（我是 Kwicks 的作者，所以......相信我：p）。

仅供参考，我今天将 Kwicks 搬到了新家：http: //devsmash.com/projects/kwicks。您最有可能使用的旧版本的文档位于http://devsmash.com/projects/kwicks/1.5.1。不过，我强烈建议更新到最新版本 - 1.5.x 中存在已知错误，而 2.x 的整体体验应该会更好。

请注意，虽然尚不支持可变大小的面板，但这似乎不是一个不合理的添加功能。随意打开一个功能请求，我可以开始研究它的可行性：https ://github.com/jmar777/kwicks/issues

于 2012-10-08T14:51:04.160 回答
0

这是我解决这个问题的方法：http: //jsfiddle.net/6xL5M/5/

我没有为此使用 Kwicks 插件，只是简单的 jQuery，基本上是：

$(".kwicks #kwick1").click(function() { 
    $(this).animate({height: 4 * itemsize + titlesize +'px'}, 600, 'easeOutQuint');
    $(this).siblings().animate({height: titlesize +'px'}, 750, 'easeOutQuint');
});

其中4 个引用者表示它有多少个项目，itemsize是每个项目的高度，titlesize是标题的高度。它还将兄弟姐妹重置为标题的高度。

也许它可以帮助某人。

谢谢你的支持！

于 2012-11-01T01:14:14.050 回答