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

Question

说明：我创建了两个按钮和另外两个元素（div 和 section）。 当我点击按钮 1 时，div 元素将以背景色 HotPink 出现和/如果此时我重新点击按钮 1，div 元素将消失。

我还为按钮 2 编写了一个函数，这样当我单击按钮 2 时，节元素将显示为背景色深绿色，此时当我再次单击按钮 2 时，节元素将消失。

我应该提到，如果我点击正文的空白区域（ (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");
    }
  });

Answer 2

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

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

$('.button1').addEventListener('click', ()=>{
    toggle('div')
});
$('.button2').addEventListener('click', ()=>{
    toggle('section')
});

function toggle(element){
    if($('.show')){
        Array.from($$('.show')).forEach((ele) => {
            ele.classList.remove('show');
        });
    }
    $(element).classList.add('show');
}

html, body {
    background-color: #fafafa;
    width: 100%;
    height: 100%;
    padding: 12px;
    margin: 0;
}

.button1 {
    background-color: pink;
    position: relative;
    display: inline-block;
    padding: 8px;
    border: none;
    margin: 0 0 6px 0;
    cursor: pointer;
}

.div {
    background-color: hotpink;
    display: none;
    width: 160px;
    height: 160px;
}

.button2 {
    background-color: green;
    position: relative;
    display: inline-block;
    padding: 8px;
    color: white;
    border: none;
    margin: 0 0 6px 0;
    cursor: pointer;
}

.section {
    background-color: darkgreen;
    display: none;
    width: 160px;
    height: 160px;
    color: white;
}

.show {
    display: block;
}

<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>

Answer 3

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

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

$(document).click(function(e) {
  $elem = $(e.target)
  // If the element is visible we shouldn't open it again
  needToggle = $elem.is('button') && !$elem.next().hasClass("open")
  $(".open").removeClass("open") // Remove all open elements
  if (needToggle) {
    $elem.next().toggleClass("open")
  }
})

html,
body {
  background-color: #fafafa;
  width: 100%;
  height: 100%;
  padding: 12px;
  margin: 0;
}

.button1 {
  background-color: pink;
  position: relative;
  display: inline-block;
  padding: 8px;
  border: none;
  margin: 0 0 6px 0;
  cursor: pointer;
}

.div {
  background-color: hotpink;
  display: none;
  width: 160px;
  height: 160px;
}

.button2 {
  background-color: green;
  position: relative;
  display: inline-block;
  padding: 8px;
  color: white;
  border: none;
  margin: 0 0 6px 0;
  cursor: pointer;
}

.section {
  background-color: darkgreen;
  display: none;
  width: 160px;
  height: 160px;
  color: white;
}

.open {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>