Закройте другие открытые div-ы по клику - PullRequest
Новая
       15

Закройте другие открытые div-ы по клику

3 голосов
/ 15 июня 2011

У меня есть несколько div-ов, скрытых в переполнении родительского элемента, и их анимация отображается при нажатии на соответствующий элемент навигационного меню, но я хочу, чтобы каждый div возвращался в исходное положение после открытия другого.Каждый элемент div и nav имеет отдельный соответствующий идентификатор.

Код ниже.

Я знаю, что здесь уже есть много подобных проблем, но я новичок в Jquery, поэтому любая помощь будет очень полезна.1010 * Edit

Дали всем навигационным ссылкам класс tab, а div - класс slide.

$(document).ready(function() { 
$(".slide");
lastMove = 0;
$(".tab").click(function() { 
    divIndex = $(this).index(); // this index relates to the ordered div list
    if (lastMove.length > 0) {
        $(lastMove).animate({"bottom": "-=800px"}, "slow");

    }
    lastMove = $(".slide:eq("+divIndex+")");
    $(lastMove).animate({"bottom": "+=800px"}, "slow"); 
});
});

Первая вкладка теперь открывается для каждого элемента навигации, в отличие от каждой соответствующей проблемы div, индекса?

Ответы [ 2 ]

1 голос
/ 15 июня 2011

Хм,

Вы имеете в виду что-то вроде этого: http://jsfiddle.net/NWMZJ/1/

//css
.moveDiv {
position:absolute;
left:50px;
top:50px;
    display: block;

}

<div class="moveDiv" id="1">content1content1content1</div>
<div class="moveDiv" id="2">content2content2content2</div>

    $(document).ready(function() { 
    lastMove = 0;
    $(".moveDiv").click(function() { 
        if (lastMove.length > 0) {
            $(lastMove).animate({"left": "-=200px", "top": "-=200px"}, "slow");
        }
        lastMove = $(this);
        $(lastMove ).animate({"left": "+=200px", "top": "+=200px"}, "slow"); 
    });
});

В общем, я верю, что вы спрашиваете, как вы перемещаете div, когда нажимаете на него в заданной координате, а затем, когда вы нажимаете другой div, перемещаете перемещенный назад и размещаете новый на месте.

Следует обратить внимание на то, что в CSS DIV является возможностью по умолчанию: Static, когда он не установлен, поэтому вы должны объявить его как абсолютный, иначе он не будет работать.

Я попытался ваш комментарий @ jsfiddle.net/NWMZJ/3

Расположение списка связывается в унисон с расположением div, поэтому при выборе класса 2 выбирается второй отображаемый элемент.

////////

Можете ли вы подтвердить, что поместили классы в теги html? 

       <nav><strong> <ul>     
            <li class="tab"><a href="#" title="News" id="news">NEWS  <span class="slash">//</span>         </a></li>     
            <li class="tab"><a href="#" title="Dates" id="dates">LIVE DATES  <span    class="slash">//</span></a></li>     
            <li class="tab"><a href="#" title="Media" id="media">MEDIA  <span class="slash">//</span></a></li>     
            <li class="tab"><a href="#" title="Band" id="band">BAND  <span class="slash">//</span></a></li>     
            <li class="tab"><a href="#" title="Community" id="community">COMMUNITY <span class="slash">//</span></a></li>     
            <li class="tab"><a href="#" title="Merchandise" id="merch">MERCHANDISE <span class="slash">//</span></a></li> </ul></strong> </nav>  

           <div class="slide" id="tab1"> NEWS</div>
          <div class="slide" id="tab2"> DATES</div>
          <div class="slide" id="tab3">MEDIA</div> 
         <div class="slide" id="tab4"> BAND</div>  

<div class="slide" id="tab5"> COMMUNITY</div> 
<div class="slide" id="tab6"> MERCHANDISE </div>
0 голосов
/ 15 июня 2011

Я бы дал div'ам класс 'tab'. Тогда вы могли бы написать: 

$("#tab1").animate({ bottom: sipPos }, 600, 'linear', function() {
   if(sipPos == 0) { sipPos = -800;}
   else { sipPos = 0; }
});

$(".tab:not(#tab1)").animate({ bottom: 0}); //.....

http://api.jquery.com/not-selector/

...