Javascript 如何仅在单击某个元素时显示该元素，并在单击其他元素时隐藏该元素？

说明：我创建了两个按钮和另外两个元素（div和section）。 当我点击按钮1时，div元素将显示为背景色HotPink，并且/如果此时我再次点击按钮1，div元素将消失

我还为按钮2编写了一个函数，这样当我单击按钮2时，section元素将以暗绿色背景出现，此时，当我再次单击按钮2时，section元素将消失

我应该提到，若我点击body（（document）的空白处，点击（event）），div和section元素都将消失

问题：当我单击按钮1时，我应该编写什么函数来显示div元素，然后当我单击按钮2或网页上的任何其他元素时隐藏它？？？



注意：我重复了这个问题，因为我不想使用像这样的方法：

$(".button1").click(function(event){
    event.stopPropagation();
    if($(".div").css("display") == "none"){
    $(".div").css("display","block");
    $(".section").css("display","none");
    }else{
    $(".div").css("display","none");
    }
    });
    $(".button2").click(function(event){
    event.stopPropagation();
    if($(".section").css("display") == "none"){
    $(".section").css("display","block");
$(".div").css("display","none");
    }else{
    $(".section").css("display","none");
    }
    });

如果你帮个忙，建议一个更好的方法，而不是在不同的事件（函数）下复制一行不同类名的代码，那就更好了。

我的代码： HTML:

<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>

<br><br>

<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>

$(function(){

    $(".button1").click(function(event){
    event.stopPropagation();
    if($(".div").css("display") == "none"){
        $(".div").css("display","block");
    }else{
        $(".div").css("display","none");
    }
  });

  $(".button2").click(function(event){
    event.stopPropagation();
    if($(".section").css("display") == "none"){
        $(".section").css("display","block");
    }else{
        $(".section").css("display","none");
    }
  });

  $(document).click(function(){
    $(".div").css("display","none");
    $(".section").css("display","none");
  });

});

---

最简单的方法是启动。单击按钮1和按钮2的功能，并使用：

.css("display","none");

隐藏其他元素的函数，如下所示：

  $(".button1").click(function(event){

    $(".section").css("display","none");

    event.stopPropagation();
    if($(".div").css("display") == "none"){
        $(".div").css("display","block");
    }else{
        $(".div").css("display","none");
    }
  });

  $(".button2").click(function(event){

    $(".div").css("display","none");

    event.stopPropagation();
    if($(".section").css("display") == "none"){
        $(".section").css("display","block");
    }else{
        $(".section").css("display","none");
    }
  });

---

没有JQuery的解决方案。。。但是如果你真的想用的话，你可以用它

const$=document.querySelector.bind（文档）；
const$$=document.queryselectoral.bind（文档）；
$（'.button1'）。addEventListener（'单击'，（）=>{
切换（'div'）
});
$（'.button2'）。addEventListener（'单击'，（）=>{
切换（'节'）
});
功能切换（元素）{
如果（$（'.show'））{
Array.from（$$（'.show'））.forEach（（ele）=>{
ele.classList.remove（'show'）；
});
}
$（element）.classList.add（'show'）；
}

html，正文{
背景色：#fafafa；
宽度：100%；
身高：100%；
填充：12px；
保证金：0；
}
.按钮1{
背景颜色：粉红色；
位置：相对位置；
显示：内联块；
填充：8px；
边界：无；
边际：0.6px 0；
光标：指针；
}
.分区{
背景色：热粉红色；
显示：无；
宽度：160px；
高度：160px；
}
.按钮2{
背景颜色：绿色；
位置：相对位置；
显示：内联块；
填充：8px；
颜色：白色；
边界：无；
边际：0.6px 0；
光标：指针；
}
.科{
背景色：暗绿色；
显示：无；
宽度：160px；
高度：160px；
颜色：白色；
}
.表演{
显示：块；
}

显示Div元素
我是Div元素




显示剖面元素
我是部门的一员

此解决方案依赖于事件冒泡，因此如果其他处理程序停止传播，它可能会中断

还请注意，它目前依赖于提供的html结构，但这可以很容易地进行调整

$（文档）。单击（函数（e）{
$elem=$（e.target）
//如果元素可见，则不应再次打开它
needToggle=$elem.is（'button'）&&&！$elem.next（）.hasClass（“打开”）
$（.open”）.removeClass（“open”）//删除所有打开的元素
如果（需要切换）{
$elem.next（）.toggleClass（“打开”）
}
})

html，
身体{
背景色：#fafafa；
宽度：100%；
身高：100%；
填充：12px；
保证金：0；
}
.按钮1{
背景颜色：粉红色；
位置：相对位置；
显示：内联块；
填充：8px；
边界：无；
边际：0.6px 0；
光标：指针；
}
.分区{
背景色：热粉红色；
显示：无；
宽度：160px；
高度：160px；
}
.按钮2{
背景颜色：绿色；
位置：相对位置；
显示：内联块；
填充：8px；
颜色：白色；
边界：无；
边际：0.6px 0；
光标：指针；
}
.科{
背景色：暗绿色；
显示：无；
宽度：160px；
高度：160px；
颜色：白色；
}
.打开{
显示：块；
}

显示Div元素
我是Div元素



显示剖面元素
我是部门的一员