Question

我有一个关于onclick事件的问题。我在研究期间发现了这段代码。我的问题是：甚至在点击文本已经出现之前，是否可以隐藏文本，直到我们点击实际按钮。是否可以单独进行大量的onclick事件，也就是说只打开上面的文本？谢谢

<html>
 <head>
  <title>Show and hide div with JavaScript</title>
  <script>
     function showhide()
     {
           var div = document.getElementById("newpost");
    if (div.style.display !== "block") {
        div.style.display = "block";
    }
    else {
        div.style.display = "none";
    }
     }
  </script>
 </head>
 <body>
  <div id="newpost">
    <p>This div will be show and hide on button click</p>
  </div>
  <button id="button" onclick="showhide()">Click Me</button>
</body>
</html>

Answer 1

是。在样式表中，设置#newpost div display: none并添加修饰符类.visible和display: block。最后，在您的功能中，您可以通过.visible切换classList.toggle课程，您应该很高兴：

var div = document.getElementById('newpost');

document.getElementById('button').addEventListener('click', showhide);

function showhide() {
  div.classList.toggle('visible');
}

#newpost {
  display: none;
}

#newpost.visible {
  display: block;
}

<button id="button">Click Me</button>

<div id="newpost">
  <p>This div will be show and hide on button click</p>
</div>

Answer 2

快乐编码：）

＆＃13;

function showhide() {
  var div = document.getElementById("newpost");
  div.classList.toggle('hidden'); 
}

＆＃13;

.hidden{
display : none;
}

＆＃13;

<html>
 <head>
  <title>Show and hide div with JavaScript</title>
 
 </head>
 <body>
 <!--if you want  by default hidden then add class .hidden in new post -->
  <div id="newpost"  class="hidden">
    <p>This div will be show and hide on button click</p>
  </div>
  <button id="button" onclick="showhide()">Click Me</button>
</body>
</html>

＆＃13;

Answer 3

默认情况下将其设置为显示属性的样式。

<div id="newpost" style="display:none">
    <p>This div will be show and hide on button click</p>
  </div>

Answer 4

在JQuery中，您可以将多个点击事件添加到按钮中，如下所示：

＆＃13;

     $("#button").on("click", function(){
      $("#newpost").toggle();
     });
     
     $("#button").on("click", function(){
      $("#secondpost").toggleClass("bold");
     });

＆＃13;

#newpost{
  display:none;
}

.bold{
  font-weight:bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
 <head>
  <title>Show and hide div with JavaScript</title>
 </head>
 <body>
  <div id="newpost">
    <p>This div will be show and hide on button click</p>
  </div>
  <button id="button">Click Me</button>
  <p id="secondpost">toggle bold</p>
</body>
</html>

＆＃13;

点击第一个切换上面的段落。第二个单击点击切换最后一个段的类，使其变为粗体。

Answer 5

html

<body>
    <div class="growth-step js--growth-step">
        <div class="step-title">
            <div class="num">2.</div>
            <h3>How Can Aria Help Your Business</h3>
        </div>
        <div class="step-details ">
            <p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
                management organization with expertise. </p>
        </div>
    </div>
    <div class="growth-step js--growth-step">
        <div class="step-title">
            <div class="num">3.</div>
            <h3>How Can Aria Help Your Business</h3>
        </div>
        <div class="step-details">
            <p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
                management organization with expertise. </p>
        </div>
    </div>
</body>

js

$(document).ready(function(){
    $(".js--growth-step").click(function(event){
       $(this).children(".step-details").slideToggle(500);
         return false;
    });
    $(".js--growth-step .step-details").click(function(event) {
        event.stopPropagation();
   });
});

点击div

5 个答案: