What does this code mean in plain engish?

$(".refine_button").click开发者_如何学编程(function(){
var butt = $(this);
$(this).next(".refine_block").slideToggle("normal", function(){
        butt.children(".refine_icon").toggleClass("opened");
        });
});

In particular the 'butt.children'

Thanks

$(".refine_button").click(function(){ // when an element with the class refine_button is clicked
    var butt = $(this); // store a reference to the element clicked
    $(this).next(".refine_block") // get the next element if it has a class refine_block
        .slideToggle("normal", function(){ // and slide it open or closed, depending on its current status
            // when that animation is finished
            butt.children(".refine_icon") // get any children of the original clicked element that have the class refine_icon
                .toggleClass("opened"); // and add or remove the class opened, depending whether they currently have it
        });
});

Any button with the class of "refine_button" that is clicked will find the element with a class of "refine_block" and either "slide" it in or out (depending on if it is in or out already, it will call the opposite). When the slide completes, it will add a class on to the "refine_icon" element within that affected "refine_block" called "opened". This will only affect the next element in the code directly adjacent to the original "refine_button" that was clicked.

butt is a variable containing a jQuery object; which contains a single element (the element with a class of refine-button that was clicked.

The children function returns the children of the elements within a jQuery object, optionally filtered by a selector, so you're retrieving the children of the clicked element, who have the class of 'refine-icon' (and, incidentally, you're toggling the class 'opened'.)

When you click an element which has the "refine_button" class applied, jQuery finds the next element on the page which has the "refine_block" class applied, and either collapse or expand it (via the slideToggle method). Once the slideToggle completes, it will either add or remove the "opened" class on all "refine_icon" elements that are defined within the "refine_block".

Points of interest:

1. It will apply to any element with class refine_button, not just button - even div or image. If a dog is called "Kitty" it's still a dog.
2. children will return only the direct child elements of the parent, no deep find.
3. The butt is declared to preserve the parent element as $(this) will get different meaning inside the slideToggle function.