JQuery - Показать и скрыть меню

Question

JQuery - Показать и скрыть меню

0

Как скрыть подменю и щелкнуть ссылку, он снова отобразит подменю...

Я пытался сделать свой собственный код, но он не работает

Я просто хочу создать простое меню, как я могу это сделать?

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<li class="Item1">
     <a href="#" >Separador 1</a>
</li>
<ul class="submenu">
     <li class="menuitem">
         <a href="#"> Submenu 1 </a>
     </li>
</ul>

<style>
li{
   float:left;
   display:inline;
   margin-left: 10px;
}
</style>
<script>
$('.item1 a').click(function() {
      $(this).children('.menuitem').toggle();
});
</script>

user3429726 31 март 2014, в 16:52

Источник

0

Вы хотите, чтобы он был скрыт по умолчанию и открывался при нажатии на ссылку?
Shomz 31 март 2014, в 14:51
0

Размещенный вами HTML-фрагмент недействителен. И JavaScript чувствителен к регистру, поэтому $('.item1 a') должно быть $('.Item1 a') .
j08691 31 март 2014, в 14:52

Теги:

jquery

6 ответов

0

Вы также можете попробовать с .closest()

$('.Item1 a').click(function() {
      $(this).closest('li').next().children().toggle();
});

Примечание. Вы предоставляли .item1 класса .item1 поскольку разметка содержит .Item1 где я является капиталом, поэтому всегда убедитесь, что селектор чувствителен к регистру

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

Dhaval Marthak 31 март 2014, в 13:45

0

Попробуй это:

<a href='javascript:toggle()'>Expand/Collapse</a>
    <script>
        function toggle(){
        var div1 = document.getElementById('toggle')
        if (div1.style.display == 'none') {
        div1.style.display = 'block'
        } else {
        div1.style.display = 'none'
        }
        }
        </script>

<div id='toggle' style='display:none'>

Benswana 31 март 2014, в 13:20

0

Чтобы ваш jQuery работал, вам нужно сделать подменю дочерним элементом li:

<li class="Item1"><a href="#" >Separador 1</a>

    <ul class="submenu">
        <li class="menuitem"><a href="#"> Submenu 1 </a></li>
    </ul>
</li>

И затем немного измените JS:

$('.Item1').click(function() {

    $(this).children('.submenu').find('.menuitem').toggle();

});

Смотрите здесь в действии: http://jsfiddle.net/nD4u8/

Вы можете добиться того же результата, используя свой код, но вам нужно немного изменить селектор. То, что я вам дал, - это более стандартный способ сделать это.

Shomz 31 март 2014, в 12:31

0

$('.Item1 a').click(function() {
      $('.submenu li').toggle();
});

играть на скрипке

vladimir.shein 31 март 2014, в 12:12

-3

$('.item1 a').click(function() {

      $(this).children('.menuitem').hide();

});

Sefa 31 март 2014, в 13:16

Ещё вопросы

Вы хотите, чтобы он был скрыт по умолчанию и открывался при нажатии на ссылку?
Размещенный вами HTML-фрагмент недействителен. И JavaScript чувствителен к регистру, поэтому $('.item1 a') должно быть $('.Item1 a') .

Arun P Johny · Accepted Answer · 2014-03-31T12-42-00.000Z

Пытаться

// 'I' capital
$('.Item1 a').click(function() {
    //the submenu is the child of the next li of current li
    $(this).parent().next().children('.menuitem').toggle();
});

Демо: скрипка

Единственный комментарий, который я хотел бы сделать, это передать параметр события.