#javascript #jquery
#javascript #jquery
Вопрос:
Привет, я пытаюсь добавить divs, которые являются красными между моими раздвижными панелями. Мое меню анимируется, когда вы вводите пункт меню, и панель выдвигается, но между каждой панелью я хочу добавлять / удалять панель динамически. когда я говорю удалить, я имею в виду, что когда вы переходите в обратном направлении по меню и выдвижная панель убирается, вы затем удаляете последний красный элемент div, а когда вы наводите курсор мыши на пункт меню и раздвижные панели удаляются, и вы добавляете один красный элемент div (шириной 5 пикселей, высота не имеет значения), вот что у меня есть на данный момент. jsFiddle
$(document).ready(function () {
$('.menu-item').mouseenter(function () {
var curr = $(this).closest('.container');
var next = curr.next('.container');
next.animate({ 'left': curr.position().left curr.width() 5 });
if(curr.index() < ($('.container').length - 1)){
here i need to add and remove a </div class="spacer"></div> to the right side
of the current(var curr) div
}
var $index = curr.index() 1;
$('.container:nth-child(' $index ')').nextAll().each(function () {
$(this).animate({ 'left': curr.position().left curr.width() 5 });
});
});
});
.spacer
{
background-color:Red; width:5px; height:200px; position:absolute; z-index:1000;
}
<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="menu" style="background-color:Black; width:2000px; height:300px;top:5px; left:50px ">
<div class="container" id="1" style="left:0; width:200px; height:220px; z-index:999; position:absolute; background-color:Aqua">
<div class="menu-item">Menu Item 1</div>
<div class="menu-item">Menu Item 2</div>
<div class="menu-item">Menu Item 3</div>
</div>
<div class="container" id="2" style="left:0; width:200px; height:300px; z-index:998; position:absolute; background-color:Blue">
<div class="menu-item">Menu Item 4</div>
<div class="menu-item">Menu Item 5</div>
<div class="menu-item">Menu Item 6</div>
</div>
<div class="container" id="3" style="left:0; width:200px; height:400px; z-index:997; position:absolute; background-color:Fuchsia">
<div class="menu-item">Menu Item 7</div>
<div class="menu-item">Menu Item 8</div>
<div class="menu-item">Menu Item 9</div>
</div>
<div class="container" id="4" style="left:0; width:200px; height:500px; z-index:996; position:absolute; background-color:Green; float:left">
<div class="menu-item">Menu Item 10</div>
<div class="menu-item">Menu Item 11</div>
<div class="menu-item">Menu Item 12</div>
</div>
<div class="container" id="5" style="left:0; width:200px; height:600px; z-index:995; position:absolute; background-color:Lime; float:left">
<div class="menu-item">Menu Item 10</div>
<div class="menu-item">Menu Item 11</div>
<div class="menu-item">Menu Item 12</div>
</div>
</div>
</td>
</tr>
</table>
Комментарии:
1. Еще раз привет! Я вижу тот же вопрос (теперь я дома … наконец-то (: D) ) Я бы действительно хотел вам помочь, но вы так неясны. И снова. Ваш скрипт все тот же. Разделы открываются, но …. слишком глючат. При наведении курсора мыши в обратном направлении div-ы не убирались корректно. Это то, чего вы на самом деле хотите или? Будьте более конкретными. И какова цель красных divs?
2. красные разделы предназначены для разделения содержимого. Я увидел элемент управления, который мне понравился, и захотел скопировать его. я не нашел в нем никаких ошибок. мне кажется, что оно убирается должным образом, но если вы можете исправить ошибки, это было бы хорошо
3. как мне удалить divs без каких-либо ошибок
4. Я хочу, чтобы мои divs выдвигались слева направо, расширялись и убирались, и с каждой панелью меню (.div.container) между ними я хочу добавить красный div, как я могу быть более неясным
5. Я просто забавляюсь. Я попытаюсь что-нибудь придумать! С помощью . функция наведения должна работать отлично, но не все изменения кода.
Ответ №1:
Здесь… не уверен, что это хорошо, но посмотрите здесь: ДЕМО
И Д И Т
Что ж, вот еще одно решение: DEMO2
Комментарии:
1. он не продолжает добавлять элементы div на панель, которая выдвинулась, он просто добавляет один
2. не совсем то, что я искал, если кто-нибудь еще знает, что делать, оставьте ответ или комментарий
3. спасибо за вашу помощь, у меня все получилось, спасибо огромное jsfiddle.net/WeYuM/2