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

Question

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

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

我应该提到，如果我点击正文（ (document).click(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");
  });

});

标签： javascriptjqueryhtmlcss

Answer 1

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

另请注意，它目前依赖于提供的 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>