0

liの幅が33％の大きなリストがあるので、3つの列があります。

computers   monitors   hi-fi
sex-toys    pancakes   scissors

それらのそれぞれにULが隠されており、slideToggleをクリックします。

JQuery

$('.subCategory > .parentleaf:has(ul) > .categoryicon').click(function() {
    $(this).siblings('ul').slideToggle('fast');
    });

私が望むようにスライドしないという問題は、彼らは毎回リストを再構築します

computers   monitors   hi-fi
[li]cars    sex-toys   pancakes
[li]dogs    scissors

私はそれらをこのようにスライドさせたい：

computers   monitors   hi-fi
[li]cars    pancakes   scissors
[li]dogs
sex-toys

どうすればこれを達成できますか？

jsFiddle

jsFiddle 2-この場合、3列の赤いbgカラーが必要です

4

1 に答える 1

1

clearer div私は3つごとに間に追加しましたli 

<ul class="subCategory">
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Cars</span>
        <ul class="submenu">
            <li><a href="#">Car 1</a></li>
            <li><a href="#">Car 2</a></li> 
            <li><a href="#">Car 3</a></li>
            <li><a href="#">Car 4</a></li>
        </ul>
    </li>
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Phones</span>
        <ul class="submenu">
            <li><a href="#">Phone 1</a></li>
            <li><a href="#">Phone 2</a></li> 
            <li><a href="#">Phone 3</a></li>
            <li><a href="#">Phone 4</a></li>
        </ul>
    </li>  
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Guns</span>
        <ul class="submenu">
            <li><a href="#">Gun 1</a></li>
            <li><a href="#">Gun 2</a></li> 
            <li><a href="#">Gun 3</a></li>
            <li><a href="#">Gun 4</a></li>
        </ul>
    </li>   
    <div class="clearer"></div>
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Notebooks</span>
        <ul class="submenu">
            <li><a href="#">Notebook 1</a></li>
            <li><a href="#">Notebook 2</a></li> 
            <li><a href="#">Notebook 3</a></li>
            <li><a href="#">Notebook 4</a></li>
        </ul>
    </li>

CSS 

.clearer
{
    clear:both; 
}

現在クリックされているインデックスを取得し、liいくつかの数学でクリック時により明確なdivを追加し、必要に応じて削除することもできますが、これは必要ないと思います

于 2013-02-19T10:25:55.730 に答える