Question

我在尝试使我的代码可切换时遇到麻烦。我能够按下按钮，它将显示隐藏的所有内容，但是，当我尝试再次按下按钮时，它将不会隐藏该内容。我在这里做什么错了？

let toggle = document.querySelector('#chevron');

toggle.addEventListener("click", function(event) {
  event.preventDefault()

  let press = toggle.value;

  if (press = "fas fa-chevron-right") {
    document.getElementById("content").classList = '';
    document.getElementById("chevron").innerHTML = 'SHOW LESS <i class="fas fa-chevron-down"></i>';
  } else if (press = "fas fa-chevron-down") {
    document.getElementById("content").classList = 'hidden';
    document.getElementById("chevron").innerHTML = 'MORE <i class="fas fa-chevron-right"></i>';
  }

});

.hidden {
  display: none;
}

a {
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="ie=edge" http-equiv="X-UA-Compatible">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
  <script defer src="main.js"></script>
</head>

<body>
  <a href="#" id="chevron" onclick="toggle"> SHOW MORE <i class="fas fa-chevron-right"></i></a>
  <div id="content" class="hidden">
    <div>
      <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 1

您可以为此使用<details> HTML元素。

HTML Details元素（
）创建一个披露窗口小部件，其中仅当该窗口小部件切换到“打开”状态时，信息才可见。可以使用
元素提供摘要或标签。

有关详细信息元素here的更多信息。

示例：

<details>
  <summary>Copyright 1999-2018.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

Answer 2

我看到您正在将两个事件处理程序附加到anchor元素。首先用作“ onclick”属性事件处理程序，还使用js中的addEventListener方法。我建议您仅使用addEventListener并删除“ onclick”处理程序。

Answer 3

似乎您正在jQuery('#t_name').select2({ ajax: { url: 'get-all_data', processResults: function (data) { return { text: item.text, id: item.id }; } } }); public function getAllData() { $json = []; $results=$this->db->select('*')->from($this->user)->get()->result_array(); foreach($results as $row) { $json[] = ['id'=>$row['id'], 'text'=>$row['name']]; } return $json; }语句中将值"fas fa-chevron-right"分配给press。这样做的结果是它总是返回true。

尝试类似以下的内容：

if

Answer 4

错误太多：

仅表单元素（输入，选择等）具有名为value的有效属性，并且它表示表单的实际内容。锚点的值未定义。
在事件侦听器中，您将条件子句放在类似if（press =“ fas fa-chevron-right”）的地方，该子句无法按预期运行，因为它不会检查变量press是否等于' fas fa-chevron-right”。它只是为印刷机分配正确的值，结果始终是正确的值，它将转换为true。因此，第一个程序段始终执行，并且显示详细信息。

如何使用Javascript显示更多或更少显示可切换按钮？

4 个答案: