JQuery Toggle открыть все div

Question

JQuery Toggle открыть все div

0

Мне нужно запустить скрипт, который я создал, он довольно простой, но он работает, но не так, как я хочу, я сделал этот код, потому что не мог найти ничего, что могло бы изменить

HTML:

<div class="corpo">
    <div class="menu-segmento">
        <div class="item total">
            <div class="item-topo">
                <div class="tooltips" >
                    <img class="ocultar" src="img/ocultar.png" />
                    <span>Veja menos</span> 
                </div>
                <div class="tooltips" >
                    <img class="mostrar" src="img/mostrar.png" />
                    <span>Veja mais</span>  
                </div>
                <p>Drenagem Linfática</p>
            </div> 
            <div class="segmento">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>  
        <div class="item total">
            <div class="item-topo">
                <div class="tooltips" >
                    <img class="ocultar" src="img/ocultar.png" />
                    <span>Veja menos</span> 
                </div>
                <div class="tooltips" >
                    <img class="mostrar" src="img/mostrar.png" />
                    <span>Veja mais</span>  
                </div>
                <p>Drenagem Linfática</p>
            </div> 
            <div class="segmento">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</div>

и вот JS для jQuery

$(function () { // DOM ready shorthand
    var flip = 0;
    $('.mostrar').click( function(){
       $('.segmento').slideToggle();
       $('.mostrar').fadeOut();
       $('.ocultar').fadeIn();
    }); 
    $('.ocultar').click( function(){
       $('.segmento').slideToggle();
       $('.ocultar').fadeOut();
       $('.mostrar').fadeIn();
    });
});

Он открывает 2 и знает, что отсутствует строка кода, но я понятия не имею, как исправить.

Какие-либо предложения?

user3068117 05 дек. 2013, в 01:51

Источник

0

Вы все неправильно поняли. Вы прячете изображение, но оставляете текст. Имеет смысл?
Roko C. Buljan 05 дек. 2013, в 00:40
0

Попробуйте jsfiddle.net/arunpjohny/pA3xJ
Arun P Johny 05 дек. 2013, в 00:43

Теги:

javascript

jquery

toggle

1 ответ

Ещё вопросы

Вы все неправильно поняли. Вы прячете изображение, но оставляете текст. Имеет смысл?

Roko C. Buljan · Answer 1 · 2013-12-04T22-02-00.000Z

LIVE DEMO

Если у вас есть этот CSS:

.segmento, .ocultar{
  display:none;
}

Удалите классы из изображений и добавьте в .tooltips:

  <div class="corpo">
    <div class="menu-segmento">
        <div class="item total">
            <div class="item-topo">
                <div class="tooltips ocultar">
                  <img src="http://placehold.it/50x50/f00&text=ocultar" />
                    <span>Veja menos</span> 
                </div>
                <div class="tooltips mostrar" >
                    <img src="http://placehold.it/50x50/cf5&text=mostrar" />
                    <span>Veja mais</span>  
                </div>
                <p>Drenagem Linfática</p>
            </div> 
            <div class="segmento">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>  
        <div class="item total">
            <div class="item-topo">
                <div class="tooltips ocultar" >
                    <img src="http://placehold.it/50x50/f00&text=ocultar" />
                    <span>Veja menos</span> 
                </div>
                <div class="tooltips mostrar" >
                    <img src="http://placehold.it/50x50/cf5&text=mostrar" />
                    <span>Veja mais</span>  
                </div>
                <p>Drenagem Linfática</p>
            </div> 
            <div class="segmento">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit nulla. Vestibulum sollicitudin sed sapien faucibus porta. Maecenas quis fringilla felis. Vestibulum ultricies quis orci et auctor. Suspendisse vitae mi odio. Maecenas tincidunt nisl sit amet ante ullamcorper bibendum. Vivamus et vestibulum velit. Proin cursus est quis velit euismod, vitae eleifend nisi ultrices. Proin nec felis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</div>

И это все, что вам нужно:

$(function () { // DOM ready shorthand 
    $('.mostrar, .ocultar').click( function(){
       var $parent = $(this).closest('.item');
       $(this).toggle().siblings().toggle();
       $parent.find('.segmento').slideToggle();
    });  
});