jQuery如果下一个隐藏元素宽度类没有孩子做某事

Posted 2023-02-24

【中文标题】jQuery如果下一个隐藏元素宽度类没有孩子做某事

【英文标题】：jQuery if next hidden element width class has no children do something

【发布时间】：2013-09-04 03:57:52

【问题描述】：

我有这个 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>

现在我想做什么：

如果（在 li.cat-item 之后，类 .subcat-item 的下一个元素有子 ul.subcat-list 并且这个 ul.subcat-list 有子级）当你点击这个 .cat-item 时，li.subcat-项目滑动切换并返回 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 应该滑动切换。

【参考方案1】：

试试

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

在操作更新问题后更新

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

【讨论】：

@user2735711 欢迎如果您满意接受答案。

Tushar 您的回答对我问题的第一部分非常有用。你能看一下编辑的部分吗？我尝试过类似的操作，但没有成功。

Tushar 我觉得现在有些不对劲。看，当您单击 .subcat-list-item 并且它没有隐藏的子项时（但此时它应该转到 url）。当有孩子时，下一个列表应该滑动。

【参考方案2】：

试试

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();
    )
)

演示：Fiddle