JQuery的 - 顯示和隱藏菜單

如何隱藏子菜單，並單擊鏈接時，它再次顯示了子...JQuery的 - 顯示和隱藏菜單

我試着做我自己的代碼，但它不工作

我只是想創建一個簡單的菜單，我該怎麼做？

<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>

來源

2014-03-31 user3429726

你希望它默認爲隱藏，當你點擊鏈接打開？ – Shomz

您發佈的HTML代碼段無效。 JavaScript是區分大小寫的，因此'$（'。item1 a'）'應該是'$（'。Item1 a'）'。 – j08691

嘗試

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

演示：Fiddle

來源

2014-03-31 14:51:43

我只會做出的評論是傳遞事件參數。 – B2K

-2

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

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

});

來源

2014-03-31 14:51:23 Sefa

對於您的jQuery的工作，你需要讓你的子菜單裏的子元素：

<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/

您可以使用您的代碼實現相同的結果，但需要修改的選擇一點。我給你的是一個更標準的方式來做到這一點。

來源

2014-03-31 14:54:13 Shomz

您也可以嘗試用.closest()

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

注：作爲標記包含.Item1其中i爲資本你正在提供.item1類的名字，所以一定要確保始終，選擇是區分大小寫的

Demo

來源

2014-03-31 14:54:31

試試這個：

<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'>

來源

2014-03-31 14:55:08 Benswana

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

fiddle

來源

2014-03-31 14:57:28

JQuery的 - 顯示和隱藏菜單

回答

相關問題