时间戳

首页 > 解决方案 > jQuery通过1个按钮切换所有段落不起作用

javascript - jQuery通过1个按钮切换所有段落不起作用

问题描述

单击最后一个按钮（全部切换）时，我试图实现切换打开/关闭所有段落元素的效果。这是我第一次尝试使用 jQuery，尽管它看起来很简单，但它并没有像我希望的那样工作。

这是我的代码：

$(document).ready(function() {
  $("#toggleAll p").click(function() {
    $(".toggleAcronym").toggle(slow);
  });
});
#p6Acronyms {
  width: 30%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 10px;
}

#p6Acronyms button {
  width: 100%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 20px;
  background: rgb(0, 152, 223);
  color: azure;
}

#p6Acronyms button:hover {
  background: rgb(0, 47, 255);
  color: antiquewhite;
}

#p6Acronyms p {
  display: none;
}
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="p6Acronyms">
    <button onclick="oneElmToggle(this)">RWE</button>
    <p class="toggleAcronym">Real World Example</p>
    <button onclick="oneElmToggle(this)">CRUD</button>
    <p class="toggleAcronym">Create, Read, Update, Delete</p>
    <button onclick="oneElmToggle(this)">CNS</button>
    <p class="toggleAcronym">Central Nervous System</p>
    <button onclick="oneElmToggle(this)">MPS</button>
    <p class="toggleAcronym">Muscle Protein Synthesis</p>
    <button onclick="oneElmToggle(this)">I.e.</button>
    <p class="toggleAcronym">In essence</p>
    <button onclick="oneElmToggle(this)">ALAP</button>
    <p class="toggleAcronym">As Long As Possible</p>
    <button onclick="oneElmToggle(this)">AMAP</button>
    <p class="toggleAcronym">As Much As Possible</p>
    <button onclick="oneElmToggle(this)">CoC</button>
    <p class="toggleAcronym">Contents of Consciousness</p>
    <button onclick="oneElmToggle(this)">RR(P)(F)-R</button>
    <p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
    <button onclick="oneElmToggle(this)">AoL</button>
    <p class="toggleAcronym">Area of Life (=Intellectual, Physical, Relationships & Intellectual)</p>
    <button onclick="oneElmToggle(this)">MBS</button>
    <p class="toggleAcronym">Mind Body & Spirit</p>
    <button onclick="oneElmToggle(this)">QoC</button>
    <p class="toggleAcronym">Quality of Consciousness</p>
    <button onclick="oneElmToggle(this)">PFC</button>
    <p class="toggleAcronym">Pre-Frontal Cortex</p>
    <button onclick="oneElmToggle(this)">SRV</button>
    <p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>
    <button onclick="oneElmToggle(this)">P/T-R</button>
    <p class="toggleAcronym">Practice/Theory-Ratio</p>
    <button id="toggleAll"><h2>Toggle All</h2></button>
    <p class="toggleAcronym">This button toggles all acronym descriptions to Show/Hide</p>
  </div>
</body>

标签： javascriptjqueryhtmlcsstoggle

解决方案

你是如此接近，传递给toggle()方法的“慢”参数必须在引号之间，如：

$(".toggleAcronym").toggle('slow');
___________________________^____^

您需要将点击事件附加到按钮而不是其中的段落，例如：

$("#toggleAll").click(function() {

代替 ：

$("#toggleAll p").click(function() {
______________^ Should be removed


$(document).ready(function() {
  $("#toggleAll").click(function() {
    $(".toggleAcronym").toggle('slow');
  });
});
#p6Acronyms {
  width: 30%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 10px;
}

#p6Acronyms button {
  width: 100%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 20px;
  background: rgb(0, 152, 223);
  color: azure;
}

#p6Acronyms button:hover {
  background: rgb(0, 47, 255);
  color: antiquewhite;
}

#p6Acronyms p {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="p6Acronyms">
  <button onclick="oneElmToggle(this)">RWE</button>
  <p class="toggleAcronym">Real World Example</p>
  <button onclick="oneElmToggle(this)">CRUD</button>
  <p class="toggleAcronym">Create, Read, Update, Delete</p>
  <button onclick="oneElmToggle(this)">CNS</button>
  <p class="toggleAcronym">Central Nervous System</p>
  <button onclick="oneElmToggle(this)">MPS</button>
  <p class="toggleAcronym">Muscle Protein Synthesis</p>
  <button onclick="oneElmToggle(this)">I.e.</button>
  <p class="toggleAcronym">In essence</p>
  <button onclick="oneElmToggle(this)">ALAP</button>
  <p class="toggleAcronym">As Long As Possible</p>
  <button onclick="oneElmToggle(this)">AMAP</button>
  <p class="toggleAcronym">As Much As Possible</p>
  <button onclick="oneElmToggle(this)">CoC</button>
  <p class="toggleAcronym">Contents of Consciousness</p>
  <button onclick="oneElmToggle(this)">RR(P)(F)-R</button>
  <p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
  <button onclick="oneElmToggle(this)">AoL</button>
  <p class="toggleAcronym">Area of Life (=Intellectual, Physical, Relationships & Intellectual)</p>
  <button onclick="oneElmToggle(this)">MBS</button>
  <p class="toggleAcronym">Mind Body & Spirit</p>
  <button onclick="oneElmToggle(this)">QoC</button>
  <p class="toggleAcronym">Quality of Consciousness</p>
  <button onclick="oneElmToggle(this)">PFC</button>
  <p class="toggleAcronym">Pre-Frontal Cortex</p>
  <button onclick="oneElmToggle(this)">SRV</button>
  <p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>
  <button onclick="oneElmToggle(this)">P/T-R</button>
  <p class="toggleAcronym">Practice/Theory-Ratio</p>
  <button id="toggleAll"><h2>Toggle All</h2></button>
  <p class="toggleAcronym">This button toggles all acronym descriptions to Show/Hide</p>
</div>

推荐阅读