jQuery默认情况下不隐藏元素

Question

Hi I'm using quite a few jQuery elements in a web application of mine. I am using jQuery UI Tabs and I am trying to put in some show hide elements within this tab, however if I put in some custom jQuery this tab fails and all other jQuery on the page fails to do what I want on default.

For example i have one div hidden by default <div class="partnersiteinfo"> however this is shown on default instead and have to click to toggle hide.

Not sure what is going wrong here, not got a lot of experience with jquery, so would appreciate some help, personally I think the error is in the JS, so I've made a jsFiddle or view my js below:

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

Answer 1

Don't hide elements with JavaScript. Use CSS instead. Also you do trigger the click on the .toggle which shows the .partnersiteinfo , this is why it becomes visible by default.

Answer 2

You are triggering the click event in your fiddle and that's the reason its visible. Remove this part and it will work.

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

Your Fiddle Updated.