创建下拉菜单功能

我的下拉菜单功能有点问题。我想要的是，第二次单击菜单选项卡后，应该隐藏可见性。创建下拉菜单功能

这里是我的代码....

HTML： -

<nav class="clearfix"> 
    <ul> 
     <li class="navTab marginRight"> 
      <a><span class="iconFont">v</span></a> 
      <ul> 
       <li><a></a></li> 
       <li><a></a></li> 
      </ul> 
     </li> 
     <li class="navTab marginRight"> 
      <a><span class="iconFont">v</span></a> 
      <ul> 
       <li><a></a></li> 
       <li><a></a></li> 
      </ul> 
     </li> 
     <li class="navTab"> 
      <a><span class="iconFont">v</span></a> 
      <ul> 
       <li><a></a></li> 
       <li><a></a></li> 
      </ul> 
     </li> 
    </ul> 
</nav>

CSS： -

.navTab ul.visible { 
    visibility: visible; 
} 

.navTab ul { 
    display: inline; 
    visibility: hidden; 
    padding: 0px; 
    z-index: 200; 
    position: absolute; 
    left: 0; 
}

的jQuery： -

$(document).ready(function(){ 
    var list = $('.navTab ul'); 

    $('li.navTab').click(function(){ 
    var thatIndex = $(this).index(); 
    list.not(':eq(thatIndex)').removeClass('visible'); 
    list.eq(thatIndex).addClass('visible'); 
    }); 
});

来源

2015-08-28 User1979

'list.not（ '：当量（' + thatIndex + '）'）.removeClass（ '可见'）;'JS变量应正确使用，因为现在你正在使用它作为字符串 – Satpal

谢谢，但我想作为一个例子是，如果我点击第一个列表，它会显示隐藏的内容，点击两次应该隐藏内容 – User1979

这里如果你点击首先李先生然后点击第二个李，第一个李内容t将被隐藏，并且第二个li内容将可见 – User1979

嗨，我认为你正在寻找这个。？

$(document).ready(function(){ 
 
    $('li.navTab ul').hide(); 
 
    $('li.navTab').click(function(){ 
 
    $(this).find('ul').slideToggle(); 
 
    }); 
 
});

<nav class="clearfix"> 
 
    <ul> 
 
     <li class="navTab marginRight"> 
 
      <a><span class="iconFont">v</span></a> 
 
      <ul> 
 
       <li><a>sssss</a></li> 
 
       <li><a>ads</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="navTab marginRight"> 
 
      <a><span class="iconFont">v</span></a> 
 
      <ul> 
 
       <li><a>hhhh</a></li> 
 
       <li><a>weq</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="navTab"> 
 
      <a><span class="iconFont">v</span></a> 
 
      <ul> 
 
       <li><a>ac</a></li> 
 
       <li><a>sadfs</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>

但我现在已经不适用你的CSS，你可以根据你的个性化风格装饰

这里是演示工作代码

Demo working code

Up过时代码

$(document).ready(function(){ 
 
    $('li.navTab ul').hide(); 
 
    $('li.navTab').click(function(){ 
 
    debugger; 
 
     if($('li.navTab').is(":visible")){ 
 
      $('li.navTab ul').hide(); 
 
      $(this).find('ul').slideToggle(); 
 
     }  
 
    }); 
 
});

Demo running code

来源

2015-08-28 12:24:16

@ User1979请检查我的回答 –

谢谢，但是我说点击这里第一个李会显示它的内容，另一个李会显示它的内容，但它不会隐藏第一个李的内容，而我不在寻找 – User1979

@ User1979在这里我更新了代码，因为你想检查出更新的一个，这是你的解决方案 –

toggleClass()方法可以帮助您。

来源

2015-08-28 12:12:43

使用toggleClass（）将执行该操作，但是单击第二个选项卡将删除其内容但不隐藏第一个标签内容 – User1979

创建下拉菜单功能

回答

相关问题