jQuery if next hidden element width class has no children do something

2
votes

I have this HTML structure:

<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>

Now what I want to do:

if ( next element after li.cat-item with class .subcat-item has child ul.subcat-list and this ul.subcat-list has children ) when you click on this .cat-item, li.subcat-item slideToggles and returns false (page not reload)

else when you click on this .cat-item there goes function: window.location = this.href;

So simply: If category has subcategory slideToggle the list with subcategory links. If category has no subcategories go to category link.

Any help with that?

// EDIT

Thanks for your answers. There goes another step that I can't handle. Here is 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>

So now: when user clicks on .subcat-list-item and next element with class .sub-subcat-item has no children (ul without li), he should go to .subcat-list-item url. Else .sub-subcat-item should slideToggle.

2
jqueryhtml

2 Answers

0
votes

Try

jQuery(function($){
    $('.cat-item').filter(function(){
        return $(this).next('.subcat-item').has('li').length > 0
    }).click(function(e){
        e.preventDefault();
        $(this).next('.subcat-item').toggle();
    })
})

Demo: Fiddle

0
votes

try

$('.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();
    }
});

DEMO

Updated after Op updated question

$('.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();
    }
});

DEMO