javascript - 如何仅在单击某个元素时显示它并在单击其他元素时隐藏它？

Question

描述:我创建了两个按钮和另外两个元素(div 和部分)。 当我点击按钮 1 时，div 元素将出现背景颜色为 HotPink 并且/如果此时我再次点击按钮 1，div 元素将消失。

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

我应该提一下，如果我点击 body ( (document).click(event) )的空白区域，div 和 section 元素都会消失。

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

Demo

注意:我重复了这个问题，因为我对使用以下任何方法不感兴趣:

$(".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>

JQuery:

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

});

Answer 1

最简单的方法是为按钮 1 和 2 启动 .click 函数:

.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");
    }
  });