单击div时如何显示另一个div？

Question

下午好，

我知道这个问题在这里被问了很多次，但是那里的所有答案都不适用于我遇到的问题。

我有一个名为.title3的 div。 当用户单击它时，我希望显示另一个名为.Content3的 div。 但不幸的是，它并没有按照我想要的方式工作。

这是我发现此问题的 html 代码的一部分：

<body style="background-color:#171717">

<div class="pseudo3">
     <div class="one3">
          <div class="Content3">
              <p class="close">X</p>
              <form action="order.php">
                <input type="text" value="First & Last Name">
                <input type="email" value="Your e-mail">
                <input type="text" value="Your phone number">
                <textarea>Write your feedback here</textarea>
                <button>Send</button>
              </form>
           </div>
           <div onmouseclick="showDiv()" class="title3">
                FEEDBACK
           </div>
      </div>
</div>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
  function showDiv() {
    var x = document.getElementsByClassName("title3");
      if ( x.click === true ){
        document.getElementsByClassName("Content3").style.display = "block";
      }
  }
    </script>
</body>

CSS：

/* The Form Style */

form {
    width: 100%;
    height: 100%;
}

form input {
    width: 100%;
    height: 35px;
    color: #8b8b8b;
    font-family: 'Lato', sans-serif;
    background-color: #171717;
    padding: 12px;
    border: 0;
    outline: none;
    border-top: 0.15px solid #262323;
    border-left: 0.15px solid #262323;
    border-right: 0.15px solid #262323;
}

form textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    max-height: 200px;
    color: #8b8b8b;
    font-family: 'Lato', sans-serif;
    background-color: #171717;
    padding: 12px;
    border: 0;
    outline: none;
    border-top: 0.15px solid #262323;
    border-left: 0.15px solid #262323;
    border-right: 0.15px solid #262323;
}

form button {
    width: 100%;
    height: 45px;
    position: relative;
    top: -3px;
    color: #8b8b8b;
    font-family: 'Lato', sans-serif;
    background-color: #171717;
    border: 0.15px solid #262323;
    outline: none;
    font-size: 20px;
}
input:focus,
textarea:focus,
button:focus{
    background-color: #212020;
    border-top: 0.15px solid #1f1616;
    border-left: 0.15px solid #1f1616;
    border-right: 0.15px solid #1f1616;
}

/* Content3 style */

.Content3 {
    width: 300px;
    height: 350px;
    position: absolute;
    z-index: 2;
    display:none;
}

/* one3 style */

.one3 {
    width: 300px;
    height: 350px;
    transition: 0.3s ease;
    position: relative;
    background-color: #141414;
}

/* pseudo3 style */

.pseudo3 {
    width: 320px;
    padding: 10px;
    border-top: 2px solid #b95e1c;
    border-bottom: 2px solid #ad7145;
    background-image:
        linear-gradient(#b95e1c, #ad7145),
        linear-gradient(#b95e1c, #ad7145);
    background-size: 2px 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
}

/* title3 style */

.one3 .title3 {
    padding: 30px;
    font-size: 24px;
    color: #8b8b8b;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

}

/* close style */

.close{
    color: #8b8b8b;
    font-size: 24px;
    position:absolute;
    left:-11px;
    top:-62px;
    z-index:3;
     border-top: 0.5px solid #1f1616;
    border-left: 0.5px solid #1f1616;
    border-right: 0.5px solid #1f1616;
    border-bottom: 0.5px solid #1f1616;
    padding:10px 17px;
    background-color:#212121;
    transition: 0.2s ease-in-out;
}
.close:hover{
    background-color: #8b8b8b;
    color:#212121;
    cursor:pointer;
    transition: 0.2s ease-in-out;
}

JavaScript：


function showDiv() {
  var x = document.getElementsByClassName("title3");
      if ( x.click === true ){
        document.getElementsByClassName("Content3").style.display = "block";
      }
}

没有错误消息，但是当我单击 my.title3 div 时，它没有显示带有 class.Content3 的 div

Answer 1

你的代码有很多问题。 我会尽量涵盖其中的大部分

您使用onmouseclick 。 这不是有效的 javascript 事件。 使用onclick 。
您正在尝试使用 class title3将 HTML 元素分配给变量x 。 这里有2个问题：
2.1。 您不需要将刚刚单击的元素分配给单击 function 内的变量。 你已经有了那个带有event.target的元素
2.2. 通过使用getElementsByClassName你得到一个 HTML 集合而不是单个元素。 （参见 Elements 的复数词）您可以使用querySelector或通过向其添加 id 并使用getElementById （参见单数 Element）来获取它。 但同样，您不需要像那样检索它。 您可以使用event.target 。 当你点击它时。
if ( x.click === true ){ . 为什么需要检查元素是否被单击，当整个 function 仅在单击该元素时才被调用？ 冗余检查且不正确。
又是在这里。 见第 2.2 点
不要用大写字母命名您的 HTML 属性。 使用content3
不要导入 jquery，因为你不需要它。

检查下面的代码

 function showDiv() { document.querySelector(".Content3").style.display = "block"; }

 .Content3 { display:none }

 <div class="pseudo3"> <div class="one3"> <div class="Content3"> <p class="close">X</p> <form action="order.php"> <input type="text" value="First & Last Name"> <input type="email" value="Your e-mail"> <input type="text" value="Your phone number"> <textarea>Write your feedback here</textarea> <button>Send</button> </form> </div> <div onclick="showDiv()" class="title3"> FEEDBACK </div> </div> </div>

有用的链接：

Answer 2

你不需要 jQuery 来做到这一点，你也可以删除你的 onmouseover 并使用这个：

<script>
//add listener for click on your .title3
document.getElementsByClassName("title3")[0].addEventListener('click', function(e){
   //prevent default action if any (dont need that in this case, but useful, if .title3 would be <a> tag)
   e.preventDefault(); 
   //set style
   document.getElementsByClassName("Content3")[0].style.display = "block";
});
</script>

Answer 3

你可以为这个主题使用data属性吗？

<div class="titles">
    <button data-id="1">open 1</button>
    <button data-id="2">open 2</button>
    <button data-id="3">open 3</button>
</div>
<div class="contents">
    <p data-id="1">context</p>
    <p data-id="2">context</p>
    <p data-id="3">context</p>
</div>

单击任何按钮时，获取data-id并使用data-id在内容 div 内执行任何操作。 如果您无法理解，我可以为此发送任何示例。

单击div时如何显示另一个div？

问题描述

3 个解决方案

解决方案1
1 已采纳 2019-09-24 12:20:16

解决方案2
0 2019-09-24 12:13:58

解决方案3
-1 2019-09-24 12:17:38

单击div时如何显示另一个div？

问题描述

3 个解决方案

解决方案1 1 已采纳 2019-09-24 12:20:16

解决方案2 0 2019-09-24 12:13:58

解决方案3 -1 2019-09-24 12:17:38

解决方案1
1 已采纳 2019-09-24 12:20:16

解决方案2
0 2019-09-24 12:13:58

解决方案3
-1 2019-09-24 12:17:38