Как использовать JQuery для скольжения и выключения Div - PullRequest
Новая
       33

Как использовать JQuery для скольжения и выключения Div

0 голосов
/ 31 мая 2011

у меня есть этот div: 

<div class="services_box">

            <div class="BOX_A">
                <img src="css/images/icon1.png" alt="" />
                <h1>Services title goes here</h1>
                <p>Aenean ultrices purus porttitor oro er risus molestie vestibulum. Morbi et nus metus justo, semper eget condimentum vitae, con varius ut sapien. Ut egestas enim non ante sagittis eget egestas tellus consequat.</p>
                <div class="servicesbutton"> <a href="#" title=""></a> </div>
            </div>

            <div class="BOX_B" **style="display:none;"**>
                <img src="css/images/icon1.png" alt="" />
                <h1>Services title goes here</h1>
                <p>Aenean ultrices purus porttitor oro er risus molestie vestibulum. Morbi et nus metus justo, semper eget condimentum vitae, con varius ut sapien. Ut egestas enim non ante sagittis eget egestas tellus consequat.</p>
                <div class="servicesbutton"> <a href="#" title=""></a> </div>
            </div>      

        </div>

как я могу заставить скрытый div скользить и кликать по ссылке, используя jQuery / js?

Ответы [ 3 ]

2 голосов
/ 31 мая 2011

Как то так? Fiddle: http://jsfiddle.net/StJ9e/1/

$('div.BOX_A h1, div.BOX_B h1').click(function() {
    $(this).siblings('.slide').slideToggle();
});

Или, если вы ищете эффект типа гармошки:

Fiddle: http://jsfiddle.net/bK4rN/2/

var $last = jQuery('.BOX_A .slide');

$('.services_box').delegate('div > h1', 'click', function() {
    $last.slideUp();
    $last = $(this).siblings('.slide');
    $last.stop(true, true).slideDown();
});

Редактировать : в ответ на комментарий

Мне нужно что-то вроде этого: jsfiddle.net/hJwqs/1 ... но мне нужно толькоодин это изменить, не все.

Измените свой код на: 

$("div.BOX_A a").click(function () {
    $(this).closest('.services_box').find('div.BOX_A').slideToggle();
});

Fiddle: http://jsfiddle.net/garreh/3KBug/

или для стилизованного: http://jsfiddle.net/garreh/cuEUG/

0 голосов
/ 31 мая 2011

Не совсем уверен, что вы имеете в виду, что-то вроде этого? 

$(document).ready(function() {
    $("div.BOX_A").bind("click", function() { $(this).slideToggle(); });
    $("div.BOX_B").bind("click", function() { $(this).slideToggle(); });
});

http://jsfiddle.net/AFLUp/

Если вы уточните, что именно должно быть видно / скрыто и т. Д., Я могу изменить код, чтобы помочь вам:)

0 голосов
/ 31 мая 2011

вы можете использовать .fadeIn() метод, чтобы заставить его появиться и .fadeOut(), чтобы исчезнуть, также вы можете использовать 

.toggle() method, you can search more on google, here are the docs anyway:

переключатель: http://api.jquery.com/toggle/

Fadein: http://api.jquery.com/fadeIn/

Исчезновение: http://api.jquery.com/fadeOut/

...