0

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

    $(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/

你能帮助我吗？

4

2 回答 2

0

您可以添加创建两个列 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 的内容。

工作示例 JSFiddle

于 2012-09-07T09:36:34.863 回答
0

如果您想让第三个菜单始终浮动到右边框，则必须清除浮动。

This is because all menus are floated to the right. As long as they have the same height, the second menu will float beside the first. The third have nothing in this row so it will be positioned at the right side. But if the first menu slide out, there is something in the row of the third menu now. So the third menu will float beside the first.

floating menu issue

Here is a working fiddle: http://jsfiddle.net/U7rKX/6/

于 2012-09-07T09:36:53.803 回答