jquery元素切换时的位置

Question

我正在构建一个页面，该页面的类别将包含与它们一起使用的页面列表。首先隐藏所有列表，然后点击一个类别，列表向下滑动。这是脚本的代码：

    $(document).ready(function() {
            $('.menu-list').hide();
            $('.menu-title').click(function() {
                if ($(this).next().is(':not(:visible)')) {
                    $('.menu-list:visible').slideUp();
                    $(this).next().slideDown();
                }
     });

该脚本有效，但问题是当我点击列中的类别而不是另一列时。比最后一个类别向左移动，我不希望它。以下是jsfiddle中的代码：http://jsfiddle.net/U7rKX/4/

你能帮助我吗？

Answer 1

您可以添加创建两个列div（50％宽度，向左浮动），并将每个类别添加到其中一个。然后，如果其中一个扩展，其余的将被推下。现在页面重新流动，因为所有类别都是正确浮动的，在这种情况下，确切的页面布局在很大程度上取决于类别的高度。

当您在php中打印类别时，您可以执行以下操作：首先在列中划分类别：

<?php
    $leftCol = array();
    $rightCol = array();

    for($i=0; $i<sizeof($categoryList); $i++){
        if($i%2 < 1){
            array_push($leftCol, $categoryList[$i];
        }else{
            array_push($rightCol, $categoryList[$i];
        }
    }
?>

现在你可以在正确的列div中打印$ leftCol和$ rightCol的内容。

Working example JSFiddle

Answer 2

如果你想要第三个菜单浮动到右边界，你必须清除浮动。

这是因为所有菜单都浮动到右侧。只要它们具有相同的高度，第二个菜单将浮动在第一个菜单旁边。第三行没有任何内容，所以它将位于右侧。但是如果第一个菜单滑出，现在第三个菜单的行中有一些东西。所以第三个菜单会漂浮在第一个菜单旁边。

这是一个工作小提琴：http://jsfiddle.net/U7rKX/6/