Слайд -ун резко прыгает в конце ⇐ Jquery

[Anonymous]

Я построил довольно нормальное расположение меню-субмену в вертикальном столбце-вложенные ULS, используя Slidetoggle для развернуть и обрушиться. (Я тестирую в последнем выпуске Chrome.) Это, вероятно, наиболее заметно во втором подменю, «преимуществах». Это не прыгает, когда меню рушится, только когда они расширяются. В частности, Class Current добавляется в тег LI после полного расширения меню. Но комментируя код, который переключает этот класс, кажется, не имеет эффекта.

Код: Выделить всё

$(document).ready(function() {
$('#group-subnav > ul > li > a').on('click', function(e) {
e.preventDefault();
var $li = $(this).closest('li');
$li.find('ul').slideToggle('', function() {
$li.toggleClass('current')
}).end().siblings().find('ul').slideUp('', function() {
$li.siblings().removeClass('current')
}).end();
});
});< /code>
/* Normalize */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
ol,ul {
list-style:none;
}

#group-subnav {
display: table-cell;
vertical-align: top;
background: #f6ca00;
width: 159px;
height: 100%;
}

#group-subnav a {
display: block;
color: inherit;
text-decoration: none;
}

#group-subnav a:hover {
/*    text-decoration: underline;*/
}

#group-subnav>ul {}

#group-subnav>ul>li {
border-top: 2px solid #fff;
font-size: 80%;
text-shadow: 1px 1px 2px #eee;
color: #333;
letter-spacing: 1px;
line-height: 1.2em;
background: #bebebe;
/* Old browsers */
}

#group-subnav>ul>li>a {
padding: 6px 8px 12px;
background: #bebebe;
/* Old browsers */
background: -moz-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bebebe), color-stop(50%, #b3b3b3), color-stop(100%, #808080));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
/* IE10+ */
background: linear-gradient(top, #bebebe 0%, #b3b3b3 50%, #808080 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#808080', GradientType=0);
/* IE6-9 */
}

#group-subnav>ul>li>a:after {
content: ' +';
float: right;
}

#group-subnav>ul>li.current>a:after,
#group-subnav>ul>li:hover>a:after {
font-size: 75%;
content: ' \25bc';
}

#group-subnav>ul>li>ul {
display: none;
background: #f4e693;
padding: 2em 0;
}

#group-subnav>ul>li.current>ul
/*,
#group-subnav > ul > li:hover >  ul*/

{
display: block;
}

#group-subnav>ul>li>ul>li {
text-shadow: none;
padding: 5px 8px;
border-bottom: 1px solid #e5b502;
color: #666;
font-size: 90%;
letter-spacing: 0;
}

#group-subnav>ul>li>ul>li:first-child {
border-top: 1px solid #e5b502;
}

#group-subnav>ul>li>ul>li>a {
color: inherit;
text-decoration: none;
}

#group-subnav>ul>li>ul>li>a:after {
content: "\00a0>";
}

#group-subnav>ul>li>ul>li>a:hover {
text-decoration: underline;
}< /code>



[list]
[*][url=#]Services[/url]

[url=#]Workflow Analysis[/url]
[*][url=#]Technology Assessment[/url]
[*][url=#]Precision Conversion[/url]
[*][url=#]Intelligent Indexing[/url]
[*][url=#]Simple Search and Retrieval[/url]
[*][url=#]Better Forms Management[/url]
[*][url=#]Effortless Distribution[/url]
[*][url=#]Total Security[/url]
[*][url=#]Easier Regulatory Compliance[/url]
[*][url=#]Scanning[/url]
[/list]

[*][url=#]Benefits[/url]
[list]
Faster Storage and Retrieval
[*]Meticulous Records Management
[*]Disaster Prevention and Recovery
[*]Heightened Security
[*]Freed-up Physical Space
[*]Responsive Customer Service
[/list]

[*][url=#]Get Started[/url]
[list]
Call our Strategic Services Manager to get started.

[url=mailto:]Email[/url]
[/list]

Просмотр на jsfiddle

Подробнее здесь: https://stackoverflow.com/questions/111 ... at-the-end