Скрытие и показ вложенных divs?

Question

Я боролся с какой-то незначительной логикой html/jquery.

Я получил Divs, называемый «работа», и внутри них есть галерея.

<div class="work"> 
     <span class="workTitle">A Work</span> 
     <div class="gallery" style="" > 
      <img src="images/works/01.jpg" width="200" height="200" /> 
      <img src="images/works/01.jpg" width="200" height="200" /> 
      <img src="images/works/01.jpg" width="200" height="200" /> 
      <img src="images/works/01.jpg" width="200" height="200" /> 
     </div> 
    </div> 

Когда я нажимаю на работе, их высоты и полей изменения в JQuery, переключив класс, который:

work.click(function() { 

    work.removeClass("on"); 
    $(this).addClass("on"); 
}); 

Но проблема в том, когда я пытаюсь добавить галерею дивы, в мой «рабочий» div, я хочу, чтобы они были скрыты, а их «закрытые» высоты не искажались.

Я также хотел бы снова закрыть класс «on», когда я нажимаю на элемент «уже открыт». но ToggleClass делает каждую работу открытой сама по себе, а не закрывая друг друга.

И последний вопрос: как мне увеличить высоту? Я получил определенное значение, но он просто анимирует параметр margin.

Заранее благодарен!

Метин.

---

И почему это не сработало никаких идей?

$(".work").click(function() { 
    openWork($(this)); 
}); 


function openWork($) { 
    $.animate({ marginLeft: openMargin }, 500, 'swing', function() { 
     // completion handler 
     $.animate({ height: workHeight }, 500, function() { 
      closeWorks($(".work").not($(this))); 
     }); 
    }); 
} 

function closeWorks($) { 
    $.animate({ height: '100%' }, 500, 'swing', function() { 
     $.animate({ marginLeft: closedMargin }, 500, 'swing', function() {}); 
}); 

Я попытался разделить идею jq_array на функции. OpenWorks(); кажется прекрасным, но closeWorks(); просто не работает ...

Answer 1

Мммм ... Я бы разделил ваш вопрос, так как слишком много разных частей. Во всяком случае, мой бит:

Я также хотел бы снова закрыть класс «включено», когда я нажимаю на элемент «уже открыт». но ToggleClass делает каждую работу открытой сама по себе, а не закрывая друг друга.

$(".work").click(function() { 
    jq_array = $(".work").not($(this)); //all the others 
    jq_array.removeClass("on");   //close any other, if open 
    $(this).toggleClass("on");   //open or close the clicked one 
}); 

Тогда:

И последний вопрос, как я анимировать высоту? Я получил определенное значение, но он просто анимирует параметр margin.

var height_sttring = "200px"; // craft the height string 

$('#selector').animate(
    { height: height_sttring }, //this is an hash, can contain more keys 
    1000,      // how many milliseconds 
    function() { 
    // completion handler 
    } 
); 

Но проблема в том, когда я пытаюсь добавить галерею дивы, в моем «работе» DIV, я хочу, чтобы они были скрыты и их «закрытыми» высота обыкновения искажаются.

Не понимаю, что вы имеете в виду, я извиняюсь ..
EDIT Try:

.work { 
    position: relative; 
} 
.work > .gallery { 
    display: none; 
    position: absolute;  // this way it will no more occupy "physical" space in the DOM. 
    bottom: 10px;   // of course you can adjust this. 
} 
.work.on > .gallery { 
    display: block; 
} 

Это должно работать, хотя вы должны сделать некоторые эксперименты, чтобы вписать его в ваш анимация время. Я бы сначала расширил родительский div.work, а затем исчез во внутреннем div.gallery.