jQuery如何在单击时隐藏其他可见的div [英] Jquery how to hide other visible divs on click

问题描述

请回答两个问题:

1)在此示例中， http://jsbin.com/ijuli ，我该怎么做因此，当单击一个图像时，另一个未隐藏的.clickSave div将返回隐藏状态.

1) In this example, http://jsbin.com/ijuli, how do I make it so when one image is clicked, the other un-hidden .clickSave divs go back to hidden.

2)有没有更有效的方式编写JS代码?

2) Is there a more efficient way to write the JS code?

jQuery

$(".clickSave").hide();  
    $(".one").click(function() {
    $(".clickSave.one").toggle(); 
});

$(".clickSave").hide();  
    $(".two").click(function() {
    $(".clickSave.two").toggle(); 
});

$(".clickSave").hide();  
    $(".three").click(function() {
    $(".clickSave.three").toggle(); 
});

非常感谢您！这一切让我感到困惑.

Thank you so much in advance! I'm so confused by all this.

推荐答案

您可以将代码更改为更加通用，如下所示:

You can change your code to be more generic like this:

$(function() {
    $(".clickSave").hide();
    $(".choose-theme-bar ul li a").click(function() {
      $(this).find(".clickSave").toggle() //toggle current
       .end().parent().siblings().find(".clickSave").hide(); //hide others
    });
});

您可以在此处查看演示的更新版本

这篇关于jQuery如何在单击时隐藏其他可见的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！