2

私はこのHTML構造を持っています:

<ul>

    <li class="cat-item">
        <a href="link.html">Link</a>
    </li>

    <li class="subcat-item" style="display: none">
        <ul class="subcat-list">
        </ul>
    </li>

    <li class="cat-item">
        <a href="link2.html">Link2</a>
    </li>

    <li class="subcat-item" style="display: none">
        <ul class="subcat-list">

            <li class="subcat-list-item"><a href="link3.html">Link 3</a></li>
            <li class="subcat-list-item"><a href="link4.html">Link 4</a></li>
            <li class="subcat-list-item"><a href="link5.html">Link 5</a></li>

        </ul>
    </li>



</ul>

今私がやりたいこと：

if (クラス .subcat-item を持つ li.cat-item の次の要素には子 ul.subcat-list があり、この ul.subcat-list には子があります) この .cat-item をクリックすると、li.subcat-item slideToggles とfalse を返します (ページはリロードされません)

それ以外の場合、この .cat-item をクリックすると、機能が実行されます: window.location = this.href;

簡単に言うと: カテゴリにサブカテゴリがある場合は、サブカテゴリのリンクでリストを切り替えます。カテゴリにサブカテゴリがない場合は、カテゴリ リンクに移動します。

それについて何か助けはありますか？

// 編集

回答ありがとうございます。私が処理できない別のステップがあります。HTML は次のとおりです。

 <ul>

     <li class="cat-item">

         <a href="link.html">Link</a>

     </li> <!-- cat-item -->

     <li class="subcat-item" style="display: none;">

         <ul class="subcat-list">        

         </ul> <!-- subcat-list -->

     </li> <!-- subcat-item -->

     <li class="cat-item">

         <a href="link.html">Link</a>

     </li> <!-- cat-item -->    

     <li class="subcat-item" style="display: none;">

        <ul class="subcat-list">

            <li class="subcat-list-item">

                <a href="link.html">Link</a>

            </li> <!-- subcat-list-item -->

            <li class="sub-subcat-item" style="display: none;">

                <ul class="sub-subcat-list">

                </ul> <!-- sub-subcat-list -->

            </li> <!-- sub-subcat-item -->

            <li class="subcat-list-item">

                <a href="link.html">Link</a>

            </li> <!-- subcat-list-item -->

            <li class="sub-subcat-item" style="display: none;">

                <ul class="sub-subcat-list">

                    <li class="sub-subcat-list-item">

                        <a href="link.html">Link</a>

                    </li> <!-- sub-subcat-list-item -->

                    <li class="sub-subcat-list-item">

                        <a href="link.html">Link</a>

                    </li> <!-- sub-subcat-list-item -->

                </ul> <!-- sub-subcat-list -->

            </li> <!-- sub-subcat-item -->

        </ul> <!-- subcat-list -->

     </li> <!-- subcat-item -->   

 </ul>

したがって、ユーザーが .subcat-list-item をクリックし、クラス .sub-subcat-item を持つ次の要素に子がない場合 (li のない ul)、ユーザーは .subcat-list-item url に移動する必要があります。それ以外の場合、.sub-subcat-item は slideToggle にする必要があります。

4

2 に答える 2

0

試す

$('.cat-item').click(function (e) {
    var x = $(this).next('.subcat-item').children('.subcat-list').children('.subcat-list-item');
    console.log(x.length);
    if (x.length > 1) {
        e.preventDefault();
        x.closest('.subcat-item').slideToggle();
    }
});

デモ

Opが質問を更新した後に更新

$('.subcat-list-item').click(function (e) {
    var x = $(this).next('.sub-subcat-item').children('ul').children('li');
    console.log(x.length);
    if (x.length != 0) {
        e.preventDefault();
        $(this).next('.sub-subcat-item').slideToggle();
    }
});

デモ

于 2013-08-31T15:26:34.907 に答える