JSP уль элемент списка динамического выбор

Question

здесь ситуация: я есть вложенный список уля в моей панели навигации т.е.

<li> 
<ul> 
<li> 
Some link 
</li> 
</ul> 
</li> 
</ul> 

это навигационная панель слева от моей плитки и справа есть содержание связанные с ним.

поэтому я хочу, чтобы конкретный ли (основной не вложенный) открывался всякий раз, когда я выбираю вложенный li. как это сделать, любым способом css или javascript.

PS: Я являюсь разработчиком веб-сайта noob, поэтому предлагайте простые решения, и есть вероятность, что этот вопрос задан раньше, но я не могу найти легкий ответ, поэтому, пожалуйста, не оценивайте его. спасибо

Answer 1

Если вы хотите отобразить его нажатием, вы можете использовать псевдо-элемент Element: target. Это то, что вы в основном должны сделать:

Ваш HTML Markup: (Дайте каждому родителю LI уникальный идентификатор и элемент внутри якоря к этому элементу)

<ul class="menu clearfix"> 
    <li id="a"> 
     <a href="#a">Item 1</a> 
     <ul class="clearfix"> 
      <li><a href="#">Item 1.1</a></li> 
      <li><a href="#">Item 1.2</a></li> 
     </ul> 
    </li> 
    <li id="b"> 
     <a href="#b">Item 2</a> 
     <ul class="clearfix"> 
      <li><a href="#">Item 2.1</a></li> 
      <li><a href="#">Item 2.2</a></li> 
     </ul> 
    </li> 
    <li id="c"> 
     <a href="#c">Item 3</a> 
     <ul class="clearfix"> 
      <li><a href="#">Item 3.1</a></li> 
      <li><a href="#">Item 3.2</a></li> 
     </ul> 
    </li> 
</ul> 

В CSS:

/* basic menu styling */ 
ul.menu { 
    position:relative; 
} 

ul.menu li { 
    display:block; 
    position:relative; 
    float:left; 
} 

ul.menu a { 
    display:block; 
    text-decoration:none; 
} 

ul.menu > li { 
    border:1px solid #000; 
    min-width:100px; 
    margin-left:-1px; 
} 

/* set up nested ul's and hide them */ 
ul.menu > li ul { 
    display:none; 
    position:absolute; 
    width:100%; 
    top:0; 
    left:0; 
} 

/* show them on click */ 
ul.menu > li:target ul { 
    display:block; 
} 

ul.menu > li > ul > li { 
    float:none; 
    display:block; 
} 

Я собрал небольшую скрипку для demonstration.