温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html + jQuery 遍历主机组下的主机

发布时间:2020-05-26 20:22:53 来源:网络 阅读:621 作者:lvnian2009 栏目:web开发




{% block right-content %}
    
     <div class="row">
        <div class="list-group ">
             <h5>主机列表</h5>
             <ul class="list-group " id="groups"  >
                {%  for group in request.user.userprofile.host_groups.select_related %}
                    <li class="list-group-item">
                        {{ group }}
                        <span class="badge">{{ group.host_set.count }}</span>
                    </li>
                    <ul class="list-group hidden">
                        {%  for host in group.host_set.select_related %}
                            <li class="list-group-item">
                                    {{ host }}
                            </li>
                         {% endfor %}
                    </ul>
                    <hr>
                {% endfor %}
             </ul>
        </div>
    </div>


{% endblock %}

{% block js %}

<script>
    $(document).ready(function () {
        $("#groups li").click(function () {
            $(this).addClass("active")
            $(this).siblings().removeClass("active")
            $(this).siblings().children().removeClass("active")
            $(this).parent().siblings().removeClass("active")
            $(this).next().removeClass("hidden")
            $(this).next().siblings('ul').addClass("hidden")
        })
    })
</script>


html + jQuery 遍历主机组下的主机

html + jQuery 遍历主机组下的主机

html + jQuery 遍历主机组下的主机

html + jQuery 遍历主机组下的主机


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI