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>

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

2 个答案: