Question

我试图创建一个按钮（位于右下角），该按钮将在单击或悬停该按钮后将其打开。单击登录后，该表单将滑动（缓慢）打开和关闭，我的代码使表单打开时该按钮处于关闭状态。

该按钮也应该位于右侧，我尝试过float:right;和right:0;来将按钮固定在右侧，但是它不起作用。

这是我的代码：

function showForm(){
  document.getElementById('loginForm').style.display = "block";
}

function hideForm(){
  document.getElementById('loginForm').style.display = "none";
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
  	.no-show{display:none;}
  	.form-container {
  position:absolute;
  bottom:0;
  right:0;
  float: right;
  width:100%;
}
body { font-family: tahoma; }
#loginForm  {
	display: none;
	background: #ccc;
	width: 250px;
	height: 100px;
	padding: 20px;
	color: #333;
}
.label {
   cursor: pointer;
   display:block;
   padding: 5px 15px;
   font-size: 16px;
   font-weight: bold;    
}
.form-label {
	width: 70px;
	font-size: 12px;
	font-weight: bold;
}
.form-field {
	width: 180px;
}

.form-elements {
	font-size: 0px;
	margin: 10px 0 0 0;
	display: block;
}

.form-label, .form-field {
	display: inline-block;
}

.form-field input {
	padding: 3px 5px;
}

.submit-btn input {
	margin-left: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">
<form>
  <p id="login" onmouseover="showForm();" onmouseout="hideForm();">
	<span class="label">Login</span>  
	<span id="loginForm">        
	  <span class="form-elements">
    <span class="form-label">Name:</span>
    <span class="form-field"><input type="name" /></span>
  </span>        
	  <span class="form-elements">
    <span class="form-label">Password:</span>
    <span class="form-field"><input type="password" /></span>
  </span>
	</span>      
  </p>
</form>
</div>

这是工作中的提琴手-https://jsfiddle.net/d5L8bywk/1/

表格应轻松自如地向上打开，并应在单击登录按钮后关闭。

它应该看起来像这样：

Answer 1

检查此代码。无需jQuery，您可以通过结合height属性使用纯CSS过渡来实现。

function showForm() {
  document.getElementById('loginForm').classList.add('show');
}

function hideForm() {
  document.getElementById('loginForm').classList.remove('show');
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  font-family: tahoma;
  height: 100vh;
}

.no-show{
  display:none;
}

.form-container {
  position: absolute;
  bottom: 40px;
  right: 80px;
  left: auto;
  top: auto;
  width: 230px;
}

#loginForm  {
  background: #ccc;
  width: 250px;
  color: #333;
  height: 0;
  overflow: hidden;
  transition: all 0.5s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#loginForm.show {
  height: 150px;
}

.label {
  cursor: pointer;
  display:block;
  padding: 5px 15px;
  font-size: 16px;
  font-weight: bold;
}
.form-label {
  width: 70px;
  font-size: 12px;
  font-weight: bold;
}
.form-field {
  width: 180px;
}

.form-elements {
  font-size: 0px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.form-label, .form-field {
  display: inline-block;
  width: 100%;
}

.form-field input {
  padding: 3px 5px;
}

.submit-btn input {
  margin-left: 70px;
}

#login {
  text-align: center;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="form-container">
<form>
    <div id="loginForm" onmouseleave="hideForm();">
      <span class="form-elements">
        <span class="form-label">Name:</span>
        <span class="form-field"><input type="name" /></span>
      </span>
      <span class="form-elements">
        <span class="form-label">Password:</span>
        <span class="form-field"><input type="password" /></span>
      </span>
    </div>
</form>

<span id="login" class="label" onmouseover="showForm();">Login</span>
  </div>

Answer 2

{
"status": true,
"message": "Login successfully",
"data": {
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3RcL2ZlYXR1cmUtbWFzdGVyXC9hcGlcL2ZkX2xvZ2luIiwiaWF0IjoxNTU1MDYzMTAzLCJleHAiOjE1ODY1OTkxMDMsIm5iZiI6MTU1NTA2MzEwMywianRpIjoiMFMxU3EzOVJRbVhYZFB6NCIsInN1YiI6NywicHJ2IjoiNGFjMDVjMGY4YWMwOGYzNjRjYjRkMDNmYjhlMWY2MzFmZWMzMjJlOCIsImFjY2Vzc19tb2R1bGUiOiJjaGlybyIsIm1vZHVsZV9pZCI6NiwidXNlcl9pZCI6N30.pJyWSlvHfJhn5bHk4_By-cAt5jzy15QgtlhGdyerriQ",
    "userData": {
        "id": 7,
        "email": "shahzad12@chiro.com",
        "status": 0,
        "created_at": "2019-04-12 09:58:01",
        "updated_at": "2019-04-12 09:58:01",
        "created_by": null,
        "updated_by": null,
        "is_super_admin": null,
        "basicInfo": null
    },
    "userInfo": {
        "id": 103,
        "user_id": 7,
        "clinic_name": "Health care",
        "first_name": "Dr wick",
        "middle_name": "john",
        "last_name": "David",
        "cell_phone_no": "111-111-1111",
        "phone_extension": 877,
        "doc_email": "nasir123@gmail.com",

    },
    "module": {
        "id": 6,
        "type": "Chiro",
        "slug": "chiro"
    },

如何在悬停或单击时向上打开表单？

2 个答案: