Question

我需要运行我制作的脚本，这是非常基本的，但它正在工作，但不是我想要的方式，我制作了这段代码，因为我找不到任何可以修改的代码

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>

这里是jQuery的JS

$(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并知道它缺少一行代码，但我不知道如何修复。

有什么建议吗？

Answer 1

<强> 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();
    });  
});

jQuery切换打开所有div

1 个答案: