一个功能来规则多个按钮，然后一些

Question

I have 7 buttons. They are distributed on top of a background image and interacting with it. They are placed absolutely. I have created a jQuery function to animate one of the buttons height. The button expands upwards. Check it out here: http://hdpano.no/bf/newindex.html and click the top left button named Deck 8.

I wish this function to handle all the buttons, but there are some variables. The baseline of each button varies, and i need to subtract from it as i expand the height. I also wish to close any other open button if one clicks another.

Here is the jQuery code:

jQuery(document).ready(function() {

$('#link8').toggle(
function()
{
  $('#deck8').animate({height: "25px",top:"202"}, 500);
},
function()
{
$('#deck8').animate({height: "150",top:"76"}, 500);

});

});

The function is quite basic and I have stripped it of all my attempts to make it work with the other buttons.

Answer 1

This does what you're looking for. Replace the code in your page with this...

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('.link').click(function() {
            var $me = $(this);
            if ($me.height() == 150) {
                $me.animate({height: "25px",top:"+=126"}, 500);
            } else {
                $(".link").each(function() {
                    if ($(this) != $me) {
                        if ($(this).height() == 150) {
                            $(this).animate({height: "25px",top:"+=126"}, 500);
                        }
                    } 
                });
                $me.animate({height: "150px",top:"-=126"}, 500);
            }
        });
    });
</script>

You can toggle the position with += and -= so it uses relative positioning, rather than absolute positioning, so that code affects all the divs on the page with class "link".

Answer 2

this in the toggle functions would be the element that is clicked.

Here is what I would do:

• remove the <br/> tags. Use margin/padding to achieve spacing.

• basically you want to expand/collapse the element ".link" (the container) for the height of the contained <ul> .

• use "+=" or "-=" with the animate function to automatically add/remove the specified value.

• as your buttons start collapsed , you should invert the two functions in the toggle

Here a code that is more general:

jQuery(document).ready(function() {

    // on click of any link with class ".linkContent"
    $('.linkContent').toggle(
    function() {
            // get the parent ".link" container
        var $parent = $(this).parent(),
            // get the full height of the <ul> to show/hide + the height of the link
            h = $parent.find('ul').outerHeight() + $(this).outerHeight();

        // animate using += and -= to avoid setting explicit values
        $parent.animate({ height: '+=' + h, top: '-=' + h }, 500);
    },
    function() {
        var $parent = $(this).parent(),
            h = $parent.find('ul').outerHeight() + $(this).outerHeight();
        $parent.animate({ height: '-=' + h, top: '+=' + h }, 500);
    });

});

The following demo shows the code in action. You might have to tweak it a bit to get the exact height to add/remove but you get the idea:

DEMO

Answer 3

What you want to do is add a class eg .deck to each button, then toggle .deck'. Inside the toggle function use .deck'. Inside the toggle function use $(this)` to refer to the current button.