Показывать только подменю после нажатия на родительское меню

Question

Показывать только подменю после нажатия на родительское меню

0

Это мой html-код

<ul class="dd-options">
    <li>
        <a class="dd-option"><label class="dd-option-text">Main_parent1</label></a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">- Main_child1</label>
        </a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">- Main_child2</label>
        </a>
    </li>
    <li class="minus">
        <a class="dd-option">
        <label class="dd-option-text">-- Sub_child1</label>
        </a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">Main_parent2</label>
        </a>
    </li>
    <li>
        <a class="dd-option">
        <label class="dd-option-text">- Main_child3</label>
        </a>
    </li>
</ul>

Вывод

Main_parent1
  - Main_child1
  - Main_child2
     -- Sub_child1
Main_parent2
  - Main_child3

Первый раз мой вывод должен быть (уже сделано)

Main_parent1
Main_parent2

Если у меня есть меню Main_parent hover, он откроет Main_child и Sub_child. Но я хочу, чтобы на Hover Main_parent открывался только Main_child. если щелчок Main_child должен открыть Sub_child.

Код jQuery

jQuery('.dd-options .dd-option-text').filter(function () {
    return jQuery.trim(jQuery(this).text())[0] == '-';
}).closest('li').hide().addClass('minus');

jQuery('.dd-options > :not(.minus)').hover(function () {
    jQuery(this).nextUntil(':not(.minus)').show();
}, function () {
    jQuery(this).nextUntil(':not(.minus)').hide();
})

демонстрация

thecodedeveloper.com 25 окт. 2013, в 08:44

Источник

Теги:

jquery

html

drop-down-menu

2 ответа

Ещё вопросы

gwillie · Answer 1 · 2013-10-25T06-06-00.000Z

Его Sub_child1 является дочерним элементом основного ul, вам нужно создать отдельную ul для вашего подменю:

<ul class="dd-options">
  <li>
    <a class="dd-option"><label class="dd-option-text">Main_parent1</label></a>
  </li>
  <li>
    <a class="dd-option">
    <label class="dd-option-text">- Main_child1</label>
    </a>
  </li>
  <li>
    <a class="dd-option">
    <label class="dd-option-text">- Main_child2</label>
    </a>
  </li>
  <ul>
    <li class="minus">
      <a class="dd-option">
      <label class="dd-option-text">-- Sub_child1</label>
      </a>
    </li>
  </ul>
  <li>
    <a class="dd-option">
    <label class="dd-option-text">Main_parent2</label>
    </a>
  </li>
  <li>
    <a class="dd-option">
    <label class="dd-option-text">- Main_child3</label>
    </a>
  </li>
</ul>

Обратите внимание на дополнительную ul, содержащую элемент Sub_child1

Udit Bansal · Answer 2 · 2013-10-25T04-57-00.000Z

you can handle this from css also

like 

parnet:hover ul(1) { display:block;} 
ul(1):hover ul{2}{ display:block;} 

HTML 

would be 

<ul>
   <li>first
        <ul>
               <li>fisrt sub child</li>
               <li></li>
        </ul>
   </li>


</ul>


no need to write jquery or javascript  like and u can google also css drop down menu