Question

由于我要按按钮隐藏/显示段落，我想用更少的脚本工作来简化以下代码

<button onclick="myFunction1()" class="dropbtn">Read more</button>            
   <p id="para1" class="dropdown-content">aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>

<button onclick="myFunction2()" class="dropbtn">Read more</button>            
   <p id="para2" class="dropdown-content">aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>

<script>
function myFunction1() {
  var x = document.getElementById("para1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
 }
function myFunction2() {
  var x = document.getElementById("para2");
   if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }  
 }
 </script>

由于我对脚本不熟悉，请帮助简化这一点，因为我在类似的工作中具有更多功能

Answer 1

您可以删除ID，并具有一个公共功能来选择下一个兄弟姐妹，即您要显示的p：

document.querySelectorAll('button').forEach((button) => {
  button.addEventListener('click', () => {
    const p = button.nextElementSibling;
    p.style.display = p.style.display === 'none' ? 'block' : 'none';
  });
});

<button>Read more</button>
<p>aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>

<button>Read more</button>
<p>aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>

您还可以使用在block和none之间切换的CSS类，并使用classList.toggle：

document.querySelectorAll('button').forEach((button) => {
  button.addEventListener('click', () => {
    button.nextElementSibling.classList.toggle('hide');
  });
});

.hide {
  display: none;
}

<button>Read more</button>
<p>aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>

<button>Read more</button>
<p>aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>

Answer 2

您可以使目标作为参数消失，而不是创建2个函数。

例如：

<button onclick="hideParagraph('para1')" class="dropbtn">Read more</button>            
    <p id="para1" class="dropdown-content">aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>

    <button onclick="hideParagraph('para2')" class="dropbtn">Read more</button>            
    <p id="para2" class="dropdown-content">aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>

    <script>
    function hideParagraph(paragraphId) {
      const paragraph = document.getElementById(paragraphId);
      const { display } = paragraph.style;
      paragraph.style.display = display === 'none' ? 'block' : 'none';
    }
    </script>

Answer 3

如果不需要Edge或IE兼容性，则可以使用<details> element将脚本简化为零（尽管Edge团队是working on it或拥有given up completely）：

/* All this is a (poor) attempt to make the <summary> look
like a <button>. If you were going to style the button
yourself anyway, drop all this. */

summary {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  display: inline;
  user-select: none;
  cursor: default;
  padding: 3px 8px;
  font: 13.3333px sans-serif;
  box-sizing: border-box;
}

summary::-webkit-details-marker {
  display: none;
}

<details>
  <summary>Read more</summary>
  <p>aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>
</details>

<details>
  <summary>Read more</summary>
  <p>aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>
</details>

隐藏<details>元素的内容（不包括<summary>，直到单击<summary>为止。浏览器将处理所有行为，不需要JavaScript。

Answer 4

向每个按钮添加一个data-target属性。这是这项工作的关键。

此属性指向需要打开/关闭的元素。

请注意，每个段落默认都隐藏了该类。

<button class="dropbtn" data-target="#para1">Read more</button>
<p id="para1" class="dropdown-content hidden">aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>

<button class="dropbtn" data-target="#para2">Read more</button>
<p id="para2" class="dropdown-content hidden">aasdsadaaaaaaaa fsdgfsdgdg dfdgdfgd11111 ffgfgd dfddf ghfddfd fdfdfhd dfdfdf d</p>

添加一些样式：

<style>
    .hidden {
        display: none !important;
    }
</style>

最后添加逻辑：

<script>
    document.addEventListener('click', function (evt) {
        const { target } = evt;
        if (target.classList.contains('dropbtn')) {
            const paragraphSelector = target.dataset.target;
            const paragraph = document.querySelector(paragraphSelector);
            if (paragraphSelector) {
                paragraph.classList.toggle('hidden');
            }
        }
    })
</script>

如何简化我的JavaScript代码以隐藏/显示参数

4 个答案: