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

2 つの列 div (50% 幅、フロート左) を作成し、各カテゴリをこれらの 1 つに追加できます。次に、そのうちの 1 つが拡大すると、残りは押し下げられます。すべてのカテゴリが右にフロートされるため、ページがリフローします。この場合の正確なページ レイアウトは、カテゴリの高さに強く依存します。

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];
        }
    }
?>

$leftCol と $rightCol の内容を適切な列 div に出力できるようになりました。

作業例 JSFiddle

于 2012-09-07T09:36:34.863 に答える
0

3 番目のメニューを常に右側の境界線にフロートさせたい場合は、フロートをクリアする必要があります。

これは、すべてのメニューが右にフロートされているためです。高さが同じである限り、2 番目のメニューは最初のメニューの横に表示されます。3 番目の行には何もないため、右側に配置されます。しかし、最初のメニューがスライドアウトすると、現在、3 番目のメニューの行に何かがあります。したがって、3 番目のメニューは最初のメニューの横に表示されます。

フローティングメニューの問題

ここに実用的なフィドルがあります：http://jsfiddle.net/U7rKX/6/

于 2012-09-07T09:36:53.803 に答える