Question

我有一个非常简单的模块要开发。在单击图像时，我需要打开我创建的div元素。我已附加了HTML和javascript文件。加载页面时，div不会出现，因为我给了style="display:none

myfunction() {
  document.getElementById('Chatbot').style.visibility = "visible";
}

<body>
  <a href="#Chatbot" id="chat" onclick="myfunction()">
    <img src="sticky.png" style="width:50px;height:50px">
  </a>

  <div id="Chatbot" style="display:none">

    <div id="header">
      Legal Genie
      <div class="icons">
        <i class="fa fa-question-circle" aria-hidden="true"></i>
        <i class="fa fa-refresh" aria-hidden="true"></i>
        <i class="fa fa-times" aria-hidden="true"></i>
      </div>

    </div>
    <div><textarea rows="3" cols="20">Press enter to send your message</textarea>
    </div>
  </div>
</body>

Answer 1

document.getElementById('Chatbot').style.display = "block";

function myfunction() {
  document.getElementById('Chatbot').style.display = "block";
}

<body>
  <a href="#Chatbot" id="chat" onclick="myfunction()">
    Some Image
  </a>

  <div id="Chatbot" style="display:none">

    <div id="header">
      Legal Genie
      <div class="icons">
        <i class="fa fa-question-circle" aria-hidden="true"></i>
        <i class="fa fa-refresh" aria-hidden="true"></i>
        <i class="fa fa-times" aria-hidden="true"></i>
      </div>

    </div>
    <div><textarea rows="3" cols="20">Press enter to send your message</textarea>
    </div>
  </div>
</body>

Answer 2

避免使用内联脚本，并避免将ID或类名的首字母大写。

只需在您的#chat锚链接中添加一个事件侦听器，该链接就会加载一个函数，该函数可在单击时将div的css display属性设置为block，如下所示：

/* JavaScript */
var chat = document.getElementById("chat");
var div = document.getElementById('chatbot');

function showDiv(){
	div.style.display = "block";
}

chat.addEventListener("click", showDiv);

/* CSS */
a {text-decoration: none; padding: 5px; background-color: green; color: white;}
#chatbot {display: none;}

<!-- HTML -->
<a type="button" href="#Chatbot" id="chat">Open Div</a>
<hr>
<div id="chatbot">
    <div id="header">
      Legal Genie
      <div class="icons">
        <i class="fa fa-question-circle" aria-hidden="true"></i>
        <i class="fa fa-refresh" aria-hidden="true"></i>
        <i class="fa fa-times" aria-hidden="true"></i>
      </div>

    </div>
    <div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>

Answer 3

这可能是一种简单的方法

<script>
$( document ).ready(function() {
    $('#chat').click( function(){
        if ( $('#Chatbot').hasClass('active') ) {
            $('#Chatbot').removeClass('active');
        } else {
            $('#Chatbot').addClass('active');
        }
});
});
</script>

添加lil CSS

<style>
.active {
display:block!important;
}
</style>

您的HTML

<body>


<div id="chat">
    Some Image
</div>
<div id="Chatbot"  style="display:none">

    <div id="header">
        Legal Genie
        <div class="icons">
            <i class="fa fa-question-circle" aria-hidden="true"></i>
            <i class="fa fa-refresh" aria-hidden="true"></i>
            <i class="fa fa-times" aria-hidden="true"></i>
        </div>

    </div>
    <div><textarea rows="3" cols="20">Press enter to send your message</textarea>
    </div>
</div>
</body>

点击图片打开div

3 个答案: