0

仕事に最適なコードを見つけました。jquery 8 no line で div height auto を設定したいです。リンクをご覧ください。

http://jsfiddle.net/alexis_tondelier/Gf2dv/

HTML

<div class="item">
    <div class="item-overlay"></div>        
</div>
<div class="item">
    <div class="item-overlay"></div>
</div>

jquery

$(document).ready(function () {
var $active,
    togglerSelector = '.item',
    toggledSelector = '.item-overlay',
    $items = $(togglerSelector),
    animationDuration = 300,
    activeClassName = 'active',
    activeStyle = {height: 300},
    notActiveStyle = {height: 0},
    hideActive = function() {
        $active && $active
            .stop()
            .animate(notActiveStyle, function() {
                $(this).removeClass(activeClassName).hide();
            });    
        $active = void 0;        
    },
    showActive = function($element) {
        $element && ($active = $element)
            .stop()
            .show()
            .animate(activeStyle)
            .addClass(activeClassName)
    };

$items.on('click', function(event) {
    var $this = $(this),
        $overlay = $this.children(toggledSelector),
        theSame = $overlay.is($active);
    hideActive();
    theSame || showActive($overlay);
});
$(this).on('click', function(event) {
    var $target = $(event.target),
        isOutClick = !$target.closest(togglerSelector).length;
    isOutClick && hideActive();
});

});

ありがとう....

4

0 に答える 0