用于 jQuery 不同尺寸的 Kwicks答案

【问题标题】：Kwicks for jQuery different sizes用于 jQuery 不同尺寸的 Kwicks
【发布时间】：2012-10-07 20:12:01
【问题描述】：

我正在使用 Kwicks for 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/

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

非常感谢。

【问题讨论】：

你的例子不够清楚。 javascript 的目标是 .cardapio-open，但是，该类名不在您的 dom 中。你可以更新这个，甚至为此制作一个 jsfiddle 以更清楚地突出问题吗？
好的，我正在做，给您带来的不便敬请见谅。
你在这里：jsfiddle.net/6xL5M/3
您的问题是让每个 li 有自己的高度，而不是 Kwicks 通过配置给每个 li 提供相同的高度？你能直观地告诉我你想要的最终结果是什么吗？

标签： javascript jquery kwicks

【解决方案1】：

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

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

如果您想要这种类型的功能，您要么必须扩展 Kwicks 库，要么只需编写自己的代码即可。

【讨论】：

嗯，非常感谢您的关注！我会看看我要做什么。

【解决方案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

【讨论】：

感谢您的回答，但是，有没有办法定义每个活动 li 的高度？再次非常感谢？
抱歉耽搁了 - 刚看到这个。很不幸的是，不行。我正在考虑在未来版本中删除固定的二级尺寸要求。我需要考虑一下它的含义，但目前还没有办法做到这一点。
感谢您的回答！我只是用 jQuery 做的，没有 Kwicks，它工作得非常好！我很快就会在这里发布代码，也许它会对某人有所帮助！谢谢

【解决方案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 是标题的高度。它还将兄弟姐妹重置为标题的高度。

也许它可以帮助某人。

感谢您的支持！

【讨论】：