Question

我正在与Kwicks一起为jQuery做垂直下拉：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/

正如你所看到的，它们有不同的内容大小，而且默认情况下，Kwicks for jQuery显示所有具有相同大小的内容，是不是有办法让每个人都拥有自己的高度？

非常感谢。

Answer 1

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

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

如果您需要这种类型的功能，您将需要扩展Kwicks库或只编写您自己的代码来执行此操作。

Answer 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

Answer 3

以下是我解决这个问题的方法： 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 是标题的高度。它还将兄弟姐妹重置为标题的高度。

也许它可以帮助某人。

感谢您的支持！

Kwicks为jQuery提供了不同的大小

3 个答案: