使用javascript创建下拉菜单

这已经在这里问过很多次了，但是我找不到可以理解的代码解决方案。使用javascript创建下拉菜单

我想创建一个移动显示/隐藏下拉菜单。

我的代码是这样：

<div> 
    <a href="">Click this Link to collapse the subitems</a> 
     <ul class="submenu"> 
     <li class="subitem">1</li> 
     <li class="subitem">2</li> 
     <li class="subitem">3</li> 
     <li class="subitem">4</li> 
     </ul> 
    <a href="">Click this Link to collapse the subitems</a> 
     <ul class="submenu"> 
     <li class="subitem">1</li> 
     <li class="subitem">2</li> 
     <li class="subitem">3</li> 
     <li class="subitem">4</li> 
     </ul> 
    <a href="">Click this Link to collapse the subitems</a> 
     <ul class="submenu"> 
     <li class="subitem">1</li> 
     <li class="subitem">2</li> 
     <li class="subitem">3</li> 
     <li class="subitem">4</li> 
     </ul> 
</div>

的子项目应被隐藏。当我点击a-Tag（“点击此链接...”）时，下面的子项目应该显示。请给我一个解决方案，而不交替代码本身 - 这甚至可能？只有点击链接的子项才会崩溃。

任何帮助？

来源

2014-04-01 user3332274

java脚本？或JavaScript？ javascript isnt java！ – sensorario

$(div > a).on('click', function() { 
    var child = $(this).child('ul.submenu'); 

    if ($(child).is(':hidden')) { 
    $(child).show(); 
    } 
    else { 
    $(child).hide(); 
    } 
});

来源

2014-04-01 07:24:31

因此，upvote ...（？）我无法抗拒评论这一个。问题不在于'jQuery'。什么样的方法是'child'，那个选择器'$（div> a）'是什么，以及为什么在一个元素对象'$（child）'中再次包装一个jQuery选择器，这是无用的开销。你也可以传递一个布尔参数给jQuery的'.toggle（）'方法...... –

Demo

添加JS：

$('div a').click(function(){ 
    $('.submenu').slideUp(); 
    $(this).next().slideDown(); 
});

来源

2014-04-01 07:23:51 Era

嗨。这个问题不是关于jQuery，（这个建议很好，但是）你能说明如何在'JavaScript'中做到这一点吗？另外'$（'div a'）'是一个模糊的选择器，也许会提示别的吗？ –

工作液：http://jsfiddle.net/avi_sagi/CfqGG/211/

的Jquery：

$(document).ready(function() { 
    $(".collapse").parent().find(".subitem").hide(); 
    $(".collapse").on('click', function() { 
     $(this).parent().find(".subitem").slideToggle(); 
    }); 
});

HTML： - 添加容器（.LIS t-group）添加到每个子菜单组中，以便parent（）方法定位其组中唯一的列表项。

<div class="wrapper"> 
    <div class="list-group"> 
     <a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a> 
     <ul class="submenu"> 
      <li class="subitem">1</li> 
      <li class="subitem">2</li> 
      <li class="subitem">3</li> 
      <li class="subitem">4</li> 
     </ul> 
    </div> 
    <div class="list-group"> 
     <a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a> 
     <ul class="submenu"> 
     <li class="subitem">1</li> 
     <li class="subitem">2</li> 
     <li class="subitem">3</li> 
     <li class="subitem">4</li> 
     </ul> 
    </div> 
    <div class="list-group"> 
     <a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a> 
     <ul class="submenu"> 
      <li class="subitem">1</li> 
      <li class="subitem">2</li> 
      <li class="subitem">3</li> 
      <li class="subitem">4</li> 
     </ul> 
    </div> 
</div>

来源

2014-04-01 08:18:51

使用javascript创建下拉菜单

回答

相关问题