Это мой код:
$("#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>
Если вы нажмете только »Один«, а затем »Кошки«, все выглядит именно так, как и должно быть. Но если щелкнуть, например, «Два» или «Три», то «Один» все еще имеет текстовое оформление. Этого не должно быть, оно также должно переключаться. Кроме того, »▶« должно быть частью этой маркировки. Его следует вставлять не более одного раза перед каждой ссылкой.
Ах, и мне понадобятся дополнительные категории, поэтому было бы здорово, если бы его можно было легко развернуть.
Может ли кто-нибудь мне помочь?
Был бы очень счастлив! :)