jQuery-вертикальный переключатель вверх (т. е. не вниз)
мне нужно создать переключатель, который анимирует вверх, а не вниз, другими словами, обратный "нормальному" переключателю. Возможно, проще, что переключатель должен скользить вверх над пунктом меню (это меню), чтобы стать видимым, а не скользить вниз как обычный slideToggle и т. д. будет делать. Я почти там с этим:
var opened = false;
$("#coltab li").click(function(){
if(opened){
$(this).children('ul').animate({"top": "+=300px"});
} else {
$(this).children('ul').animate({"top": "-=300px"});
}
$(this).children('ul').children().slideToggle('slow');
$(this).children('ul').toggle();
opened = opened ? false : true;
});
но если вы "переключаете" элемент, то другой элемент второй элемент (скользит вниз) падает на 300px не скользит вверх (поднимается) на 300px. Хороший пример (ненавижу сайт) того, чего я хочу достичь, этоhttp://market.weogeo.com/#/home и "вкладки" внизу.
мой HTML-код использует
<ul id="#coltab">
<li>Item 1
<ul>
<li>This bit needs to toggle up</li>
</ul>
</li>
<li>Item 2
<ul>
<li>This bit needs to toggle up</li>
</ul>
</li>
etc ...
</ul>
на стороне CSS
ul#coltab { position: relative' blah; blah; }
и
ul#coltab ul { display: none; position: absolute; blah; blah; }
какие идеи?
было бы неплохо, если бы каждый "щелчок" закрыл предыдущий переключатель перед открытием переключателя "щелчок".
4 ответов
Я мог бы дать более конкретный ответ, если бы вы предоставили фактические CSS для списков вместо наполнителя.
в основном, вы захотите установить bottom
собственность ul#coltab ul
to 0
.
общий пример: http://jsfiddle.net/s7AD8/
ul#coltab ul {
position:absolute;
bottom:0;
/*...and so on*/
}
Это заставит его оживить в направлении вверх.
попробуй это:
$("#coltab li ul").each(function (index) {
$(this).data('height', $(this).outerHeight());
});
$("#coltab li").click(function () {
$("#coltab li ul.open").animate({"top": 0}, function () {
$(this).removeClass('open');
});
var itemHeight = $(this).children('ul').data('height');
$(this).find('ul:not(.open)').animate({"top": -itemHeight}).addClass('open');
});
и добавьте новый класс css:
#coltab ul.open { display: block; }
"- =300px " будет чувствовать себя лучше, будучи предварительно вычисленным var.. (Можете ли вы даже обрабатывать вычисления в строках?)
далее, Если вы хотите манипулировать ими самостоятельно, я бы предположил, что вам будет намного проще, предоставив идентификаторы для деталей, которые вы хотите обработать
вы также можете использовать другой способ, Если вам нужно освободить UL и Li для чего-то еще:
<style>
body { margin: 100px 50px; }
#coltab { position: relative; text-align: center; }
#coltab > li {
background: #ccc;
color: #444;
cursor: pointer;
display: block;
float: left;
margin: 0 10px;
padding: 10px 20px;
position: relative;
width: 100px;
}
#coltab span {
background: #eee;
color: #222;
display: none;
padding: 5px;
position: absolute;
left: 0;
right; 0;
top: 0;
z-index: -1;
}
#coltab span.open { display: block; }
</style>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"> </script>
</head>
<body>
<div id="coltab">
<li>Item 1<br/>(click me)
<span>This first item needs to toggle up</span>
</li>
<li>Item 2<br/>(click me)
<span>This second item needs to toggle up</span>
</li>
</div>
<script>
$(document).ready(function() {
$("#coltab li span").each(function (index) {
$(this).data('height', $(this).outerHeight());
});
$("#coltab li").click(function () {
$("#coltab li span.open").animate({"top": 0}, function () {
$(this).removeClass('open');
});
var itemHeight = $(this).children('span').data('height');
$(this).find('span:not(.open)').animate({"top": -itemHeight}).addClass('open');
});
});
</script>
</body>