Я пытаюсь создать страницу сценария (ирония c) и не могу заставить эту часть кода работать правильно. Может быть, я просто просматриваю это или мне нужно сделать перерыв сегодня. Но я пытаюсь создать страницу с вложенными перечисленными элементами, которые являются ссылками, отображающими содержимое во втором контейнере div. По сути, это боковое меню на странице.
Думаю, моя проблема заключается в том, что вложенный перечисленный элемент уже находится в теге li и переключает «текущий» класс. Как мне обойти это?
<style>
@font-face{font-family:Poppins;src:url(../FONT/Poppins/Poppins-Regular.woff) format('woff');font-weight:600}
html {font-family:'Poppins',sans-serif;width:100%;height:100%;overflow:hidden;background:rgba(10,10,10,0.85);}
body{width:100%;height:100%;margin:0;}
h1,h2,h3,h4{font-weight:300;letter-spacing:4px;color:#ccc}h1{font-size:2.5vh}h2{font-size:2.25vh}h3{font-size:2vh}h4{font-size:1.75vh}li,p,span{font-size:1.35vh;color:#ccc}a{text-decoration:none;}
.scripted-header{width:100%;height:5%;display:inline-block;}
.scripted-container{width:100%;height:95%;}
.scripted-left{width:15%;height:100%;display:inline-block;float:left;}
.scripted-right{width:85%;height:100%;display:inline-block;float:left;}
.scripted-accordion{list-style:none;margin:0;padding:0;width:100%;height:auto;}
.scripted-accordion-li{width:100%;min-height:4vh;margin:0;cursor:pointer;}
.scripted-accordion-li:hover{color:rgb(109,127,204);background:rgba(20,20,20,0.85);}
.scripted-accordion-li span{color:inherit;padding-left:2.5%}
.scripted-links{list-style:none;width:100%;height:auto;margin:0;padding:0;display:none;}
.scripted-links.current{display:inline-block;}
.scripted-links li{width:100%;line-height:4vh;margin:0;padding:0;;display:inline-block;}
.scr-li{text-decoration:none;color:#ccc;background:rgb(109,127,204);}
.scr-li:hover{background-color:#ccc;color:rgb(109,127,204);}
.scr-li span{padding-left:5%;color: inherit;}
.sub-scripted-links{list-style:none;width:100%;height:auto;margin:0;padding:0;display:none;}
.sub-scripted-links.current{display:inline-block;}
.sub-scr-li{text-decoration:none;color:#ccc;background:rgb(109,127,204);}
.sub-scr-li:hover{background-color:#ccc;color:rgb(109,127,204);}
.sub-scr-li span{padding-left:5%;color: inherit;}
</style>
</head>
<body>
<div class="scripted-header"><h1 style="width: 75%; height: 100%; margin: auto; text-align: center; ">Scripted.</h1></div>
<div class="scripted-container">
<div class="scripted-left">
<ul class="scripted-accordion">
<li class="scripted-accordion-li" data-tab="scripted-1">
<span>Windows</span>
<ul class="scripted-links" id="scripted-1">
<li class="scr-li" data-tab="sub-scripted-1"><span>Batch</span></li>
<li class="scr-li" data-tab="sub-scripted-2"><span>PowerShell</span>
<ul class="sub-scripted-links" id="sub-scripted-2">
<li class="sub-scr-li"><span>Windows Security Hardener</span></li>
</ul>
</li>
</ul>
</li>
<li class="scripted-accordion-li" data-tab="scripted-2">
<span>Linux</span>
<ul class="scripted-links" id="scripted-2">
<li class="scr-li"><span>Bash</span></li>
</ul>
</li>
<li class="scripted-accordion-li" data-tab="scripted-3">
<span>Language</span>
<ul class="scripted-links" id="scripted-3">
<li class="scr-li"><span>Python</span></li>
<li class="scr-li"><span>Perl</span></li>
</ul>
</li>
</ul>
</div>
<div class="scripted-right">
<p>This is a test</p>
</div>
</div>
<script>
$(document).ready(function(){
$('.scripted-accordion-li').click(function(){
var scripted_id = $(this).attr('data-tab');
$("#"+scripted_id).toggleClass('current');
})
});
</script>
<script>
$(document).ready(function(){
$('.scr-li').click(function(){
var sub_scripted_id = $(this).attr('data-tab');
$("#"+sub_scripted_id).toggleClass('current');
})
});
</script>
Итак, проблема возникает, когда я нажимаю Windows -> PowerShell, он переключит тег Windows UL закрытым и откроет меню вложенного скрипта, чтобы показать Windows Отвердитель безопасности. Чтобы просмотреть только что открытый элемент списка (Windows Security Hardner), я должен снова щелкнуть Windows. По сути, я хочу переключить отображение и скрыть основные перечисленные элементы (Windows, Linux, Язык) при нажатии на каждый отдельно, не закрывая его, если я нажимаю на подпункт в списке. А также, если отображается "Windows" ul, и я нажимаю Linux li, он не только откроет Linux li, но и закроет Windows ul.
Спасибо!