Это мой 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();
})
Его 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
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