滑動下拉菜單

Question

我有一個下拉菜單，當菜單按鈕被點擊時，我想向下滑動，當它再次點擊時向上滑動。單擊文檔中的任何其他位置時也會向上滑動。

這是我走到這一步：jsfiddle

HTML：

<nav> 
    <a class="dropdown-toggle" href="#" title="Menu">Menu</a> 
    <ul class="dropdown"> 
    <li><a href="#">Menu Item</a></li> 
    <li><a href="#">Menu</a></li> 
    <li><a href="#">Settings</a></li> 
    <li><a href="#">Search</a></li> 
    </ul> 
</nav> 

的Jquery：

$(function() { 
    // Dropdown toggle 
    $('.dropdown-toggle').click(function() { 
    $(this).next('.dropdown').toggle(function() { 
     $('.dropdown').stop().animate({ 
     top: '100%' 
     }, 'slow'); 
    }); 
    }); 

    $(document).click(function(e) { 
    var target = e.target; 
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) { 
     $('.dropdown').toggle(function() { 
     $('.dropdown').stop().animate({ 
     top: '-100px' 
     }, 'slow'); 
    }); 
    } 
    }); 
}); 

什麼我做的問題是動畫只發生一次，只有當點擊打開下拉菜單。

Answer 1

回答我自己的人誰是有興趣的問題，這是代碼：

$(function() { 
 
    $('.dropdown').hide(); 
 
    $('.dropdown-toggle').click(function(e) { 
 
    $('.dropdown').slideToggle(400); 
 
    $('.dropdown-toggle').slideDown('active'); 
 
    $('.dropdown').toggleClass('is-active'); 
 
    return false; 
 
    }); 
 
    $(document).click(function() { 
 
    if ($('.dropdown').is(':visible')) { 
 
     $('.dropdown', this).slideUp(); 
 
     $('.dropdown').removeClass('is-active'); 
 
    } 
 
    }); 
 
});

body { 
 
    padding: 2em; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
nav { 
 
    position: relative; 
 
} 
 
.dropdown-toggle { 
 
    padding: .5em 1em; 
 
    background: #777; 
 
    border-radius: .2em .2em 0 0; 
 
} 
 
.dropdown { 
 
    position: absolute; 
 
    margin-top: .5em; 
 
    background: #777; 
 
    min-width: 12em; 
 
    padding: 0; 
 
    top: 0; 
 
    left: 0; 
 
    -webkit-transform: translateY(-60px); 
 
    -ms-transform: translateY(-60px); 
 
    transform: translateY(-60px); 
 
    transition: transform .3s 
 
} 
 
.dropdown.is-active { 
 
    -webkit-transform: translateY(30px); 
 
    -ms-transform: translateY(30px); 
 
    transform: translateY(30px); 
 
    display: block 
 
} 
 
ul.dropdown li { 
 
    list-style-type: none; 
 
} 
 
ul.dropdown a { 
 
    text-decoration: none; 
 
    padding: .5em 1em; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a> 
 
    <ul class="dropdown"> 
 
    <li><a href="#">Menu Item</a> 
 
    </li> 
 
    <li><a href="#">Menu</a> 
 
    </li> 
 
    <li><a href="#">Settings</a> 
 
    </li> 
 
    <li><a href="#">Search</a> 
 
    </li> 
 
    </ul> 
 
</nav>

我用toggleClass和removeClass添加我想要的動畫，這就是翻譯（這個想法最初來自Slide and Push Menu tutorial）：

-webkit-transform: translateY(-60px); 
-ms-transform: translateY(-60px); 
transform: translateY(-60px); 
transition: transform .3s 

Answer 2

我不知道你是否知道，但也有.slideUp()，.slideDown()和.slideToggle()方法的jQuery爲此，可使用滑動動畫上下業務。

下面是供您參考的片段：

var dropdownToggle = $('.dropdown-toggle'); 
 
var dropdown = dropdownToggle.next('.dropdown'); 
 
$(function() { 
 
    dropdown.slideUp(0); 
 
    $(document).on('click', function(e) { 
 
    var target = e.target; 
 
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) { 
 
     if (dropdown.is(':visible')) { 
 
     dropdown.stop(true).slideUp(); 
 
     } 
 
    } 
 
    }); 
 
    dropdownToggle.on('click', function() { 
 
    dropdown.stop(true).slideToggle(); 
 
    }); 
 
});

body { padding: 2em; } 
 
a { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
nav { position: relative; } 
 
.dropdown-toggle { 
 
    padding: .5em 1em; 
 
    background: #777; 
 
    border-radius: .2em .2em 0 0; 
 
} 
 
ul.dropdown { 
 
    position: absolute; 
 
    top: 100%; 
 
    margin-top: .5em; 
 
    background: #777; 
 
    min-width: 12em; 
 
    padding: 0; 
 
    border-radius: 0 0 .2em .2em; 
 
} 
 
ul.dropdown li { list-style-type: none; } 
 
ul.dropdown a { 
 
    text-decoration: none; 
 
    padding: .5em 1em; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a> 
 
    <ul class="dropdown"> 
 
    <li><a href="#">Menu Item</a></li> 
 
    <li><a href="#">Menu</a></li> 
 
    <li><a href="#">Settings</a></li> 
 
    <li><a href="#">Search</a></li> 
 
    </ul> 
 
</nav>

注：

• 你有CSS transition應用在相同的元素，你也想通過在同一元素上使用jQuery的.animate()方法應用動畫ENT。兩者相互衝突。我已經刪除了CSS transition部件。
• 我還去掉了height: 0一部分，你會發現有一個dropdown.slideUp(0)線那裏基本上施加.slideUp()動畫0的時間，以便立即着手height: 0的元素。

希望這有助於。