问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

$.slideToggle()如何判断当前是否是展开状态?

头像
_XYZ111
    492253176

    $.slideToggle()如何判断当前是否是展开状态?

    注意是点击按钮后立即判断, 而不是slideToggle()执行后再判断

    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://localhost:8000/library/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(".menu-parent").nextAll("ul").css("display", "none")
                $(".menu-parent").click(function() {
                    $(this).next("ul").slideToggle()
                })
            })
        </script>
    </head>
    <body>
        <ul>
            <li>
                <a href="javascript:void(0)" class="menu-parent">展开/折叠</a>
                <ul>
                    <li><a href="javascript:void(0)">b1</a></li>
                    <li><a href="javascript:void(0)">b2</a></li>
                    <li><a href="javascript:void(0)">b3</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>

    需求

    点击按钮后控制台输出是否是展开状态 即 true or false

    javascriptjqueryhtml
    阅读 2.3k
    1 个回答
    得票最新
    头像
    _XYZ111
      492253176
      ✓ 已被采纳

      $.slideToggle()这个函数里的回调事件无法立即执行

      网上查了很久也没有什么好的解决办法, 只能用这种方法了. 有点极端

      就是设置个class, 如果元素没有就添加, 有了就删除

      
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://localhost:8000/library/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                let clazz = "cut"
                $(".menu-parent").nextAll("ul").css("display", "none")
                $(".menu-parent").click(function() {
                    const el = $(this).next("ul")
                    el.slideToggle()
                    if (el.hasClass(clazz)) {
                        el.removeClass(clazz)
                        console.log("折叠")
                    } else {
                        el.addClass(clazz)
                        console.log("展开")
                    }
                })
            })
        </script>
    </head>
    <body>
        <ul>
            <li>
                <a href="javascript:void(0)" class="menu-parent">展开/折叠</a>
                <ul>
                    <li><a href="javascript:void(0)">b1</a></li>
                    <li><a href="javascript:void(0)">b2</a></li>
                    <li><a href="javascript:void(0)">b3</a></li>
                </ul>
            </li>
            <li><a href="#a1">a1</a></li>
            <li>
                <a href="javascript:void(0)" class="menu-parent">展开/折叠</a>
                <ul>
                    <li><a href="javascript:void(0)">b4</a></li>
                    <li><a href="javascript:void(0)">b5</a></li>
                    <li><a href="javascript:void(0)">b6</a></li>
                </ul>
            </li>
            <li><a href="#a2">a2</a></li>
            <li>
                <a href="javascript:void(0)" class="menu-parent">展开/折叠</a>
                <ul>
                    <li><a href="javascript:void(0)">b7</a></li>
                    <li><a href="javascript:void(0)">b8</a></li>
                    <li><a href="javascript:void(0)">b9</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题