由于某些原因，BoostOdds.js已停止为同一个文件BoostOdds.js中的html，jQuery代码加载html，因此我完全迷失了，怎么可能？
查看“切换所有按钮”以查看jQuery是否正常运行，以及所有其他按钮以查看JS是否正常运行。
Index.html
＆
BoostOdds.js
位于同一目录中。这是代码，感谢您的帮助：
function oneElmToggle(elm) {
const display = elm.nextSibling.style.display;
if (display === "none" || display === "") {
elm.nextSibling.style.display = "block";
}
else {
elm.nextSibling.style.display = "none";
}
}
window.onload = function () {
$("#toggleAllElms").click(function () {
$(".toggleAcronym").toggle('fast');
});
};* {
text-align: center;
height: auto;
padding: 10px 0;
box-sizing: border-box;
text-decoration: none;
color: black;
}
.p {
font-size: 1.5rem;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 70%;
margin: 25px auto;
color: aliceblue;
padding: 10px;
}
.pv2 {
background: linear-gradient(to top left, rgb(196, 196, 196), rgb(0, 0, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
padding: 10px 5px;
color: aliceblue;
margin: 10px 0;
}
.pv2 span {
color: white;
}
.BOLD {
font-weight: 800;
}
.UNDERLINED {
text-decoration: underline;
}
.MARKED {
background-color: rgba(251, 255, 0, 0.315);
padding: 2px;
display: inline;
}
.CURSIVE {
font-style: italic;
}
#REDTEXT, .REDTEXT {
color: red;
}
body {
min-width: 700px;
}
header {
width: 100%;
min-width: 700px;
height: 80px;
text-align: center;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
color: rgb(250,220,255);
position: absolute;
top: 0;
left: 0;
box-shadow: 0 3px 3px rgb(0,0,0);
}
#IPT {
color: aliceblue;
margin-top: 0px;
}
.CMPT /* Choose Meta Principle Title */ {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 80px auto 0 auto;
}
.CMPC /* Choose Meta Principle Container*/ {
list-style-type: none;
width: 90%;
margin: -10px auto 20px auto;
}
.MPC /* Meta Principle Choice*/ {
width: auto;
background: linear-gradient(to top left, rgb(255, 220, 200), rgb(250, 170, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
margin-top: 25px;
font-size: 2rem;
font-weight: 700;
}
.MPC:hover {
color: white;
background: linear-gradient(to top left, rgb(0,0,0), rgb(0, 10, 70));
}
.MP /* Meta Principle */ {
width: 60%;
background: linear-gradient(to top left, rgb(0,0,0), rgb(0, 10, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
color: white;
margin: 0 auto;
font-size: 2rem;
font-weight: 700;
}
.CSP {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 40px auto 20px auto;
}
.CSPFC {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 98%;
margin: 0px auto 20px auto;
}
.SPC {
background-color: white;
border: 1px solid black;
border-radius: 10px;
text-align: center;
font-size: 15px;
width: 25%;
margin: 0 3px;
box-shadow: -1px 3px 3px black;
}
.SPC:hover {
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
color: black;
}
.SP {
font-size: 1.6rem;
text-align: center;
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 86%;
margin: 20px auto;
}
.C {
border: 1px solid black;
border-radius: 30%;
width: 60%;
margin: 0 auto;
display: grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto;
padding: 35px 80px;
grid-column-gap: 15px;
}
#p1131 {
border-right: 1px solid grey;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
grid-area: 1 / 1 / 2 / 3;
}
#p11311 {
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
grid-area: 2 / 1 / 3 / 2;
}
#p11312 {
grid-area: 2 / 2 / 3 / 3;
background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
}
#p11313 {
grid-area: 3 / 2 / 4 / 3;
border-right: 1px solid grey;
background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
font-size: .7rem;
}
#p11314 {
background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
border-right: 1px solid grey;
font-size: .7rem;
grid-area: 4 / 2 / 5 / 3;
}
.C3C { /*Container 3 Columns*/
grid-template-columns: repeat(3, 33%);
padding: 25px 80px;
}
#p1135 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
#p11351 {
grid-area: 2 / 1 / 3 / 2;
}
#p11352 {
grid-area: 2 / 2 / 3 / 3;
}
#p11353 {
grid-area: 2 / 3 / 3 / 4;
}
#p1136Acronyms {
width: 30%;
border: 1px solid black;
margin: 0 auto;
padding: 5px;
}
#p1136Acronyms button {
width: 100%;
border: 1px solid rgb(0, 0, 0);
margin: 0 auto;
padding: 10px;
background: linear-gradient(to bottom right, rgb(168, 0, 0), rgb(253, 0, 0), rgb(255, 255, 255));
color: azure;
}
#p1136Acronyms button:hover {
background: linear-gradient(to bottom right, rgb(0, 47, 255), rgb(0, 47, 255), white);
color: antiquewhite;
}
#p1136Acronyms p {
display: none;
}
#p1137 span {
color: white;
}
#p1138 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
footer {
height: 30px;
width: 100%;
background: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 0));
position: absolute;
left: 0;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
} <!DOCTYPE HTML5><html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intellectual Principles</title>
<meta name="description" content="Intellectual Principles">
<meta name="author" content="Ronnlidd">
<link rel="stylesheet" type="text/css" href="../../css/BoostOdds.css">
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="BoostOdds.js"></script>
<!-- COMMENTS FOR UNDERSTANDING THIS FILE -->
<!-- class="p" is default principle box, class="pv2" is a second version of a principle box, suitable for grid-items, often overwritten withs styles for specifici levels of principles.-->
</head>
<body>
<header>
<h1 id="IPT"> <!-- Intellectual Principles Title-->
Intellectual Principles
</h1>
</header>
<h2 class="CMPT">Choose Meta-Principle</h2> <!-- Choose Meta Principle Title -->
<ul class="CMPC"> <!-- Choose Meta Principle Container -->
<a href="#p11"><li class="MPC"> <!-- Meta Principle Choice -->
Boost your odds of success through de-centralized principle-guided decision-making.
</li></a>
<a href=""><li class="MPC"> <!-- Meta Principle Choice -->
Learn, Grow, Evolve. Be Anti-Fragile.
</li></a>
<a href=""><li class="MPC"> <!-- Meta Principle Choice -->
Apply principles in complex sub-systems of reality.
</li></a>
</ul>
<h2 class="MP" id="p11"> <!-- Meta Principle -->
Boost your odds of success through de-centralized principle-guided decision-making.
</h2>
<h2 class="CSP"> <!-- Choose Sub Principle -->
Choose Sub-Principle
</h2>
<div class="CSPFC"> <!-- Choose Sub Principle Flex Container-->
<a class="SPC" href="#p111"> <!-- Sub Principle Choice -->
Find out what reality looks like through <i>The Scientific Method</i><!-- Link to other doc--> & phenomenology of consciousness.
</a>
<a class="SPC" href="#p112"> <!-- Sub Principle Choice -->
<i>Find your meaning/Why What do you want reality to be like?</i><!-- Link to other doc-->
</a>
<a class="SPC" href="#p113"> <!-- Sub Principle Choice -->
Write down principles for making decisions in future realities.
</a>
<a class="SPC" href="#p114"> <!-- Sub Principle Choice -->
Turn principles into algorithms.</a>
<a class="SPC" href="#p115"> <!-- Sub Principle Choice -->
Incrementally RUD principles for 4 AoL.
</a>
<a class="SPC" href="#p116"> <!-- Sub Principle Choice -->
Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i>
</a>
</div>
<h3 class="SP" id="p111"> <!-- Sub Principle -->
Find out what reality looks like through <a>The Scientific Method</a> & phenomenology of consciousness.
</h3>
<h3 class="SP" id="p112"> <!-- Sub Principle -->
<a>Find your meaning/Why</a> <i>What do you want reality to be like?</i>
</h3>
<h3 class="SP" id="p113"> <!-- Sub Principle -->
Write down principles for making decisions in future realities.
</h3>
<div class="C"> <!-- Container -->
<h4 class="pv2" id="p1131">Meta-principles make sub-principles obsolete.</h4>
<h4 class="pv2" id="p11311">Principles serve you, you don't serve them. //Plan unrigidly & keep an open mind.</h4>
<h4 class="pv2" id="p11312">Delay decisions AMA(subj.)P.</h4>
<h4 class="pv2" id="p11313">Use situational awareness in combination with more general principles as basis for decisions. //Instead of seeking order and getting pseudoorder when planning.</h4>
<h4 class="pv2" id="p11314">If subjective brain thinks, at a deliberate level in a state of happy intelligent consiousness, that a decision should be made, that decision can be made even though it violates some meta-principle.</h4>
</div>
<div class="p" id="p1132">If principle is subj. practically re-usable, Then write it down. Else embrace the subj. experience of fully being.</div>
<div class="p" id="p1133">Summarize books & experiences by principles and then transfer them to their place in the principle-hierarchy.</div>
<div class="p" id="p1134">If subj. practical, Then write down what will falsify and make obsolete, the principle that you’re using/pondering. //Else keep it in top of mind.</div>
<div class="C C3C"> <!-- Container 3 Columns -->
<h4 class="pv2" id="p1135">Use markers, colors and distinguishers. //To communicate with your future self.</h4>
<h4 class="pv2" id="p11351"><span class="BOLD">Bold, </span><span class="UNDERLINED">underlined</span> or <span class="MARKED">marked</span> means part of principle is important.</h4>
<h4 class="pv2" id="p11352"><span class="CURSIVE">Cursive</span> means referencing something which has a mental representation.</h4>
<h4 class="pv2" id="p11353"><span id="REDTEXT">Red text</span> means it is not ordered enough for level of principle in which it currently is located, //Work has to be done w/principle.</h4>
</div>
<div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p1136Acronyms"> <!-- First jQuery/JS -->
<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 (My arbitrarily created 4 AoL are: 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="toggleAllElms"><h2>Toggle All</h2></button>
<p class="toggleAcronym">This button toggles all acronym explanations to Show/Hide</p>
</div>
<div class="p" id="p1137">Minimize repeating principles, maximize referencing of principle-documents. <span class="CURSIVE">//Many principles are overlapping into other arbitrary areas of life. Made-up for the purpose of my understanding. There's no problem in making one area of life have incomplete principles, as long as you reference the meta-principle in another AoL in which relevant principles have their domain.</span></div>
<!-- Insert links to highly overlapping principle documents -->
<div class="C C3C">
<h4 class="pv2" id="p1138">Write down principles by right level of order.</h4>
<h4 class="pv2" id="p11381">Chaos accepted in AoL back-end doc</h4>
<h4 class="pv2" id="p11382">Order to 90% <span class="CURSIVE">(pseudocode)</span> in principle-docs</h4>
<h4 class="pv2" id="p11383">Order to 100% <span class="CURSIVE">(code)</span> in UI & Algos</h4>
</div>
<h3 class="SP" id="p114">Turn principles into algorithms.</h3>
<div class="p" id="p1141">If subj. RR(P)(F)-R has to be counseled in step of algorithm, Then use JS, HTML & CSS to produce pop-up box with relevant alternatives to provide algorithm with relevant info to continue until decision which can be acted out in reality is reached.</div>
<h3 class="SP" id="p115">Incrementally RUD principles for 4 AoL.</h3>
<h3 class="SP" id="p116">Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h3>
<a href=""><div class="p" id="p1161">( Apply principles in complex sub-systems of reality. )</div></a>
<footer>
</footer>
</body>
</html>
我可以看到jQuery在此代码段中不起作用，但是在我的项目中起作用，所以我的主要问题是如何使JS在我的项目中也起作用。谢谢。
更新： 文件夹结构：
CODE //Project folder
- css
- node_modules
- jQuery npm (Pseudo for loads of folders and files)
- Principles
- IntPrin
- BoostOdds.js
- index.html
- scss
- index.js //Main/Starting, server is set up here
- package.json
- package-lock.json
答案 0 :(得分：1)
jQuery可以运行，但不能正常运行ElemToggle 为什么要为此功能使用vanila JS？使用jQuery方法。它紧凑而简单：
// there is no need for inline onclick="oneElmToggle(this)" on every button
// and inline JS in no-no
$("#p1136Acronyms > button:not(#toggleAllElms)").click(oneElmToggle)
// all buttons exept one with id="toggleAllElms"
function oneElmToggle() {
$(this).next().toggle('fast')
// nextSibling
}
window.onload = function() {
$("#toggleAllElms").click(function() {
$(".toggleAcronym").toggle('fast');
});
};* {
text-align: center;
height: auto;
padding: 10px 0;
box-sizing: border-box;
text-decoration: none;
color: black;
}
.p {
font-size: 1.5rem;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 70%;
margin: 25px auto;
color: aliceblue;
padding: 10px;
}
.pv2 {
background: linear-gradient(to top left, rgb(196, 196, 196), rgb(0, 0, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
padding: 10px 5px;
color: aliceblue;
margin: 10px 0;
}
.pv2 span {
color: white;
}
.BOLD {
font-weight: 800;
}
.UNDERLINED {
text-decoration: underline;
}
.MARKED {
background-color: rgba(251, 255, 0, 0.315);
padding: 2px;
display: inline;
}
.CURSIVE {
font-style: italic;
}
#REDTEXT,
.REDTEXT {
color: red;
}
body {
min-width: 700px;
}
header {
width: 100%;
min-width: 700px;
height: 80px;
text-align: center;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
color: rgb(250, 220, 255);
position: absolute;
top: 0;
left: 0;
box-shadow: 0 3px 3px rgb(0, 0, 0);
}
#IPT {
color: aliceblue;
margin-top: 0px;
}
.CMPT
/* Choose Meta Principle Title */
{
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 80px auto 0 auto;
}
.CMPC
/* Choose Meta Principle Container*/
{
list-style-type: none;
width: 90%;
margin: -10px auto 20px auto;
}
.MPC
/* Meta Principle Choice*/
{
width: auto;
background: linear-gradient(to top left, rgb(255, 220, 200), rgb(250, 170, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
margin-top: 25px;
font-size: 2rem;
font-weight: 700;
}
.MPC:hover {
color: white;
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(0, 10, 70));
}
.MP
/* Meta Principle */
{
width: 60%;
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(0, 10, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
color: white;
margin: 0 auto;
font-size: 2rem;
font-weight: 700;
}
.CSP {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 40px auto 20px auto;
}
.CSPFC {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 98%;
margin: 0px auto 20px auto;
}
.SPC {
background-color: white;
border: 1px solid black;
border-radius: 10px;
text-align: center;
font-size: 15px;
width: 25%;
margin: 0 3px;
box-shadow: -1px 3px 3px black;
}
.SPC:hover {
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
color: black;
}
.SP {
font-size: 1.6rem;
text-align: center;
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 86%;
margin: 20px auto;
}
.C {
border: 1px solid black;
border-radius: 30%;
width: 60%;
margin: 0 auto;
display: grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto;
padding: 35px 80px;
grid-column-gap: 15px;
}
#p1131 {
border-right: 1px solid grey;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
grid-area: 1 / 1 / 2 / 3;
}
#p11311 {
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
grid-area: 2 / 1 / 3 / 2;
}
#p11312 {
grid-area: 2 / 2 / 3 / 3;
background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
}
#p11313 {
grid-area: 3 / 2 / 4 / 3;
border-right: 1px solid grey;
background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
font-size: .7rem;
}
#p11314 {
background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
border-right: 1px solid grey;
font-size: .7rem;
grid-area: 4 / 2 / 5 / 3;
}
.C3C {
/*Container 3 Columns*/
grid-template-columns: repeat(3, 33%);
padding: 25px 80px;
}
#p1135 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
#p11351 {
grid-area: 2 / 1 / 3 / 2;
}
#p11352 {
grid-area: 2 / 2 / 3 / 3;
}
#p11353 {
grid-area: 2 / 3 / 3 / 4;
}
#p1136Acronyms {
width: 30%;
border: 1px solid black;
margin: 0 auto;
padding: 5px;
}
#p1136Acronyms button {
width: 100%;
border: 1px solid rgb(0, 0, 0);
margin: 0 auto;
padding: 10px;
background: linear-gradient(to bottom right, rgb(168, 0, 0), rgb(253, 0, 0), rgb(255, 255, 255));
color: azure;
}
#p1136Acronyms button:hover {
background: linear-gradient(to bottom right, rgb(0, 47, 255), rgb(0, 47, 255), white);
color: antiquewhite;
}
#p1136Acronyms p {
display: none;
}
#p1137 span {
color: white;
}
#p1138 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
footer {
height: 30px;
width: 100%;
background: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 0));
position: absolute;
left: 0;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p1136Acronyms">
<!-- First jQuery/JS -->
<button>RWE</button>
<p class="toggleAcronym">Real World Example</p>
<button>CRUD</button>
<p class="toggleAcronym">Create, Read, Update, Delete</p>
<button>CNS</button>
<p class="toggleAcronym">Central Nervous System</p>
<button>MPS</button>
<p class="toggleAcronym">Muscle Protein Synthesis</p>
<button>I.e.</button>
<p class="toggleAcronym">In essence</p>
<button>ALAP</button>
<p class="toggleAcronym">As Long As Possible</p>
<button>AMAP</button>
<p class="toggleAcronym">As Much As Possible</p>
<button>CoC</button>
<p class="toggleAcronym">Contents of Consciousness</p>
<button>RR(P)(F)-R</button>
<p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
<button>AoL</button>
<p class="toggleAcronym">Area of Life (My arbitrarily created 4 AoL are: Intellectual, Physical, Relationships & Intellectual)</p>
<button>MBS</button>
<p class="toggleAcronym">Mind Body & Spirit</p>
<button>QoC</button>
<p class="toggleAcronym">Quality of Consciousness</p>
<button>PFC</button>
<p class="toggleAcronym">Pre-Frontal Cortex</p>
<button>SRV</button>
<p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>
<button>P/T-R</button>
<p class="toggleAcronym">Practice/Theory-Ratio</p>
<button id="toggleAllElms"><h2>Toggle All</h2></button>
<p class="toggleAcronym">This button toggles all acronym explanations to Show/Hide</p>
</div>
为什么嵌入式JS是bad practice。
开发者控制台是您的朋友。如果不起作用，请检查控制台。在您的代码段中，除了错误（缺少jquery链接）外，还有一个错误：Cannot read property 'display' of undefined。
nextSibling不是您想要的。 next 元素就可以了。 What is the difference between node.nextSibling and ChildNode.nextElementSibling
function oneElmToggle(elm) {
const sibling = elm.nextElementSibling;
if (!sibling.style.display) {
// there is no "style.display" by default so we toggle to "block" because in css we have "none"
sibling.style.display = "block";
} else {
if (sibling.style.display === "none") {
sibling.style.display = "block";
} else {
sibling.style.display = "none";
}
}
}
window.onload = function() {
$("#toggleAllElms").click(function() {
$(".toggleAcronym").toggle('fast');
});
};* {
text-align: center;
height: auto;
padding: 10px 0;
box-sizing: border-box;
text-decoration: none;
color: black;
}
.p {
font-size: 1.5rem;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 70%;
margin: 25px auto;
color: aliceblue;
padding: 10px;
}
.pv2 {
background: linear-gradient(to top left, rgb(196, 196, 196), rgb(0, 0, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
padding: 10px 5px;
color: aliceblue;
margin: 10px 0;
}
.pv2 span {
color: white;
}
.BOLD {
font-weight: 800;
}
.UNDERLINED {
text-decoration: underline;
}
.MARKED {
background-color: rgba(251, 255, 0, 0.315);
padding: 2px;
display: inline;
}
.CURSIVE {
font-style: italic;
}
#REDTEXT,
.REDTEXT {
color: red;
}
body {
min-width: 700px;
}
header {
width: 100%;
min-width: 700px;
height: 80px;
text-align: center;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
color: rgb(250, 220, 255);
position: absolute;
top: 0;
left: 0;
box-shadow: 0 3px 3px rgb(0, 0, 0);
}
#IPT {
color: aliceblue;
margin-top: 0px;
}
.CMPT
/* Choose Meta Principle Title */
{
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 80px auto 0 auto;
}
.CMPC
/* Choose Meta Principle Container*/
{
list-style-type: none;
width: 90%;
margin: -10px auto 20px auto;
}
.MPC
/* Meta Principle Choice*/
{
width: auto;
background: linear-gradient(to top left, rgb(255, 220, 200), rgb(250, 170, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
margin-top: 25px;
font-size: 2rem;
font-weight: 700;
}
.MPC:hover {
color: white;
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(0, 10, 70));
}
.MP
/* Meta Principle */
{
width: 60%;
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(0, 10, 70));
border-radius: 1%;
box-shadow: 0 7px 7px black;
color: white;
margin: 0 auto;
font-size: 2rem;
font-weight: 700;
}
.CSP {
text-align: center;
border: 2px solid rgb(255, 0, 0);
width: 40%;
margin: 40px auto 20px auto;
}
.CSPFC {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 98%;
margin: 0px auto 20px auto;
}
.SPC {
background-color: white;
border: 1px solid black;
border-radius: 10px;
text-align: center;
font-size: 15px;
width: 25%;
margin: 0 3px;
box-shadow: -1px 3px 3px black;
}
.SPC:hover {
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
color: black;
}
.SP {
font-size: 1.6rem;
text-align: center;
background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
border-radius: 1%;
box-shadow: 0 7px 7px black;
width: 86%;
margin: 20px auto;
}
.C {
border: 1px solid black;
border-radius: 30%;
width: 60%;
margin: 0 auto;
display: grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto;
padding: 35px 80px;
grid-column-gap: 15px;
}
#p1131 {
border-right: 1px solid grey;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
grid-area: 1 / 1 / 2 / 3;
}
#p11311 {
background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
grid-area: 2 / 1 / 3 / 2;
}
#p11312 {
grid-area: 2 / 2 / 3 / 3;
background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
}
#p11313 {
grid-area: 3 / 2 / 4 / 3;
border-right: 1px solid grey;
background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
font-size: .7rem;
}
#p11314 {
background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
border-right: 1px solid grey;
font-size: .7rem;
grid-area: 4 / 2 / 5 / 3;
}
.C3C {
/*Container 3 Columns*/
grid-template-columns: repeat(3, 33%);
padding: 25px 80px;
}
#p1135 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
#p11351 {
grid-area: 2 / 1 / 3 / 2;
}
#p11352 {
grid-area: 2 / 2 / 3 / 3;
}
#p11353 {
grid-area: 2 / 3 / 3 / 4;
}
#p1136Acronyms {
width: 30%;
border: 1px solid black;
margin: 0 auto;
padding: 5px;
}
#p1136Acronyms button {
width: 100%;
border: 1px solid rgb(0, 0, 0);
margin: 0 auto;
padding: 10px;
background: linear-gradient(to bottom right, rgb(168, 0, 0), rgb(253, 0, 0), rgb(255, 255, 255));
color: azure;
}
#p1136Acronyms button:hover {
background: linear-gradient(to bottom right, rgb(0, 47, 255), rgb(0, 47, 255), white);
color: antiquewhite;
}
#p1136Acronyms p {
display: none;
}
#p1137 span {
color: white;
}
#p1138 {
grid-area: 1 / 1 / 2 / 4;
background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
}
footer {
height: 30px;
width: 100%;
background: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(0, 0, 0));
position: absolute;
left: 0;
background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p" id="p1136">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p1136Acronyms">
<!-- First jQuery/JS -->
<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 (My arbitrarily created 4 AoL are: 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="toggleAllElms"><h2>Toggle All</h2></button>
<p class="toggleAcronym">This button toggles all acronym explanations to Show/Hide</p>
</div>
<div class="p" id="p1137">Minimize repeating principles, maximize referencing of principle-documents. <span class="CURSIVE">//Many principles are overlapping into other arbitrary areas of life. Made-up for the purpose of my understanding. There's no problem in making one area of life have incomplete principles, as long as you reference the meta-principle in another AoL in which relevant principles have their domain.</span></div>
<!-- Insert links to highly overlapping principle documents -->
<div class="C C3C">
<h4 class="pv2" id="p1138">Write down principles by right level of order.</h4>
<h4 class="pv2" id="p11381">Chaos accepted in AoL back-end doc</h4>
<h4 class="pv2" id="p11382">Order to 90% <span class="CURSIVE">(pseudocode)</span> in principle-docs</h4>
<h4 class="pv2" id="p11383">Order to 100% <span class="CURSIVE">(code)</span> in UI & Algos</h4>
</div>
<h3 class="SP" id="p114">Turn principles into algorithms.</h3>
<div class="p" id="p1141">If subj. RR(P)(F)-R has to be counseled in step of algorithm, Then use JS, HTML & CSS to produce pop-up box with relevant alternatives to provide algorithm with relevant info to continue until decision which can be acted out in reality is reached.</div>
<h3 class="SP" id="p115">Incrementally RUD principles for 4 AoL.</h3>
<h3 class="SP" id="p116">Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h3>
<a href="">
<div class="p" id="p1161">( Apply principles in complex sub-systems of reality. )</div>
</a>
<footer>
</footer>
</body>
</html>