小编Rit*_*itu的帖子

为什么我的 JS 函数没有点击就自动触发?

基本上我想切换“活动”类。我希望在我的 main.js 文件中包含所有与 JS 相关的代码。我的意思是我不希望我的 #readmore 按钮在其属性中包含 onClick=toggle() 。onClick 方法工作正常,切换我的“活动”类。但问题是不这样做。当我使用下面的代码时,它会自动将“活动”类添加到 .container 并且在我单击 #readmore 时不会删除。顺便说一下,我不想使用 jQuery。

我的代码

var myBtn = document.querySelector("#readmore");

myBtn.addEventListener("click", toggle());

function toggle() {
   document.querySelector(".container").classList.toggle('active');
};
Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div class="content">
   <h2>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, modi! Ipsum ab non voluptas facilis maxime architecto nulla consectetur recusandae.
   </h2>
   <img src="img/img4.jpg" alt="" width="600px">
   <a href="#" id="readmore">Read More</a>
</div>
Run Code Online (Sandbox Code Playgroud)

html javascript css web

1
推荐指数
1
解决办法
60
查看次数

复选框对齐表替代项

我有 5 个复选框和一个有 6 行(1 个头,5 个主体)的表格,该表格代表问题的选择。如何将每个复选框与每行的第一行对齐?

table,
thead,
td {
  border: 1px solid black;
  padding: 3px;
}

thead {
  font-weight: bold !important;
}

table {
  margin: 5px;
  margin-bottom: 1rem;
}

.form-check {
  margin-left: -20px;
}
Run Code Online (Sandbox Code Playgroud)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<p style="margin-left: 20px;">
<form id='f1'>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='A'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='B'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='C'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='D'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='E'></div>
</form>
<table>
  <thead>
    <tr>
      <td> …
Run Code Online (Sandbox Code Playgroud)

css bootstrap-4

1
推荐指数
1
解决办法
60
查看次数

标签 统计

css ×2

bootstrap-4 ×1

html ×1

javascript ×1

web ×1