jQuery:带装饰的可切换路径式导航

Question

这是我的代码：

$("#one_link").click(function() {
$("#categories").toggle();
$(this).toggleClass("active"); //Active class
$(this).prepend("▶ "); //Should toggle and not insert over and over again
$("#text_three").hide();
$("#cats_text").hide();
$("#text_two").hide();
});
$("#cats_link").click(function() {
$("#cats_text").toggle();
$(this).toggleClass("active"); //Active class
$(this).prepend("▶ "); //Should toggle and not insert over and over again
$("#text_two").hide();
$("#text_three").hide();
});
$("#two_link").click(function() {
$("#text_two").toggle();
$(this).toggleClass("active"); //Active class
$(this).prepend("▶ "); //Should toggle and not insert over and over again
$("#categories").hide();
$("#cats_text").hide();
$("#text_three").hide();
});
$("#three_link").click(function() {
$("#text_three").toggle();
$(this).toggleClass("active"); //Active class
$(this).prepend("▶ "); //Should toggle and not insert over and over again
$("#categories").hide();
$("#cats_text").hide();
$("#text_two").hide();
});

* {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 30px;
line-height: 100%;
cursor: default;
font-family: Arial;
}
html,
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.content {
display: flex;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.column {
border-right: 1px solid black;
}
.column_content {
overflow-y: scroll;
width: 100%;
height: 100%;
padding: 20px;
}
.column {
display: none;
}
.column:first-child {
display: block;
}
li:hover {
cursor: pointer;
}
.active {
text-decoration: underline yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="column">
<div class="column_content">
<ul>
<li id="one_link">One</li>
<li id="two_link">Two</li>
<li id="three_link">Three</li>
</ul>
</div>
</div>
<div id="categories" class="column">
<div class="column_content">
<ul>
<li id="cats_link">Cats</li>
</ul>
</div>
</div>
<div class="column" id="cats_text">
<div class="column_content">
<p>The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.</p>
</div>
</div>
<div class="column" id="text_two">
<div class="column_content">
<p>2 (two) is a number, numeral, and glyph. It is the natural number following 1 and preceding 3. It is the smallest and only even prime number. Because it forms the basis of a duality, it has religious and spiritual significance in many cultures.</p>
</div>
</div>
<div class="column" id="text_three">
<div class="column_content">
<p>3 (three) is a number, numeral, and glyph. It is the natural number following 2 and preceding 4, and is the smallest odd prime number. It has religious or cultural significance in many societies.</p>
</div>
</div>
</div>

如果你只点击"一个"，然后点击"猫"，它看起来应该是什么样子。但是，如果您单击，例如"两个"或"三个"，则"一个"仍有文本装饰。这不应该发生，它也应该切换。此外，»▶«应该是该标记的一部分。每个链接之前最多应插入一次。

啊，我需要更多的类别，所以如果它可以轻松扩展就太好了。

有人能帮我吗？

会很高兴的！：(

Answer 1

不能说这是完美的，但我做了一些改进。

对于初学者来说，我通过利用class和一些data-*等HTML属性来减少重复的Javascript的数量

请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*

还要注意，我将您的▶移动到了active类上的一个伪元素中。

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

$('.tab-opening-button').click(function(){ 
const openId = $(this).attr('data-open');
const linkParent = $(this).attr('data-parent-link');
if(!linkParent){
$('#categories').hide();
}
$('.text-panel').hide();
$(openId).show();

$('.tab-opening-button').not(linkParent).removeClass('active');
$(this).addClass('active'); 
});

* {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 30px;
line-height: 100%;
cursor: default;
font-family: Arial;
color: rgb(80, 80, 80);
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.content {
display: flex;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.column {
border-right: 3px solid;
flex-shrink: 0;
}
.text-panel {
flex-shrink: 1;
}
.column_content {
overflow-y: auto;
width: 100%;
height: 100%;
padding: 20px;
}
.column {
display: none;
}
.column:first-child {
display: block;
}
li:hover {
cursor: pointer;
}
.active {
text-decoration: underline yellow;
}
.active:before {
content: "▶ "
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="column">
<div class="column_content">
<ul>
<li data-open="#categories" class="tab-opening-button" id="one_link">One</li>
<li data-open="#text_two" class="tab-opening-button" id="two_link">Two</li>
<li data-open="#text_three" class="tab-opening-button" id="three_link">Three</li>
</ul>
</div>
</div>
<div id="categories" class="column">
<div class="column_content">
<ul>
<li data-open="#cats_text" data-parent-link="#one_link"  class="tab-opening-button" id="cats_link">Cats</li>
</ul>
</div>
</div>
<div class="column text-panel" id="cats_text">
<div class="column_content">
<p>The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated
species in the family Felidae and is often referred to as the domestic cat to distinguish it from the
wild members of the family.</p>
</div>
</div>
<div class="column text-panel" id="text_two">
<div class="column_content">
<p>2 (two) is a number, numeral, and glyph. It is the natural number following 1 and preceding 3. It is the
smallest and only even prime number. Because it forms the basis of a duality, it has religious and
spiritual significance in many cultures.</p>
</div>
</div>
<div class="column text-panel" id="text_three">
<div class="column_content">
<p>3 (three) is a number, numeral, and glyph. It is the natural number following 2 and preceding 4, and is
the smallest odd prime number. It has religious or cultural significance in many societies.</p>
</div>
</div>
</div>