jQuery默认情况下不隐藏元素

时间:2013-12-05 13:27:37

标签: javascript jquery html

您好我在我的网络应用程序中使用了很多jQuery元素。我正在使用jQuery UI选项卡,我试图在此选项卡中放入一些show hide元素,但是如果我放入一些自定义jQuery,则此选项卡失败并且页面上的所有其他jQuery都无法执行我想要的默认设置。

例如,我默认隐藏了一个div <div class="partnersiteinfo">但是默认情况下会显示这个div而必须单击以切换隐藏。

不确定这里出了什么问题,没有很多jquery的经验,所以会感谢一些帮助,我个人认为错误是在JS中,所以我做了一个jsFiddle或查看我的js如下:

JS / js.js

$(document).ready(function () {
    $('.partnersiteinfo').hide();
    $('.toggle').on('click', function () {
        $('.partnersiteinfo').slideToggle();

        return false;
    });
    $(function () {
        $('#sortsitemap').on('click', '.toggle', function () {
            //Gets all <tr>'s  of greater depth
            //below element in the table
            var findChildren = function (tr) {
                var depth = tr.data('depth');
                return tr.nextUntil($('tr').filter(function () {
                    return $(this).data('depth') <= depth;
                }));
            };
            var el = $(this);
            var tr = el.closest('tr'); //Get <tr> parent of toggle button
            var children = findChildren(tr);

            //Remove already collapsed nodes from children so that we don't
            //make them visible. 
            //(Confused? Remove this code and close Item 2, close Item 1 
            //then open Item 1 again, then you will understand)
            var subnodes = children.filter('.expand');
            subnodes.each(function () {
                var subnode = $(this);
                var subnodeChildren = findChildren(subnode);
                children = children.not(subnodeChildren);
            });

            //Change icon and hide/show children
            if (tr.hasClass('collapse')) {
                tr.removeClass('collapse').addClass('expand');
                children.hide();
            } else {
                tr.removeClass('expand').addClass('collapse');
                children.show();
            }
            return children;
        }).find('.toggle').trigger('click');

    });
    $(function () {
        $("#tabs").tabs();
    });
});

2 个答案:

答案 0 :(得分:1)

不要使用JavaScript隐藏元素。请改用CSS。您也会触发显示click的{​​{1}}上的.toggle,这就是默认情况下可见的原因。

答案 1 :(得分:1)

您正在触发小提琴中的点击事件,这就是它可见的原因。删除此部分,它将工作。

find('.toggle').trigger('click');

Your Fiddle Updated.