jq 多项下拉菜单选项卡

最新推荐文章于 2022-09-12 01:08:12 发布

q雨中漫步q

最新推荐文章于 2022-09-12 01:08:12 发布

阅读量581

点赞数

分类专栏： JQ 文章标签： JQ下拉菜单选项卡

本文链接：https://blog.csdn.net/qq_39918584/article/details/89884804

版权

JQ 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

html5

<div class="nav-maiche">
	     <ul class="navulmaiche">
			<li>
		     	   111
			</li>
			<li>
		         	2222
			</li>
			<li>
		        	33333
			</li>
			<li >
			      44444
			</li>
		</ul>
</div>
<ul class="navulblock">
      <li>模块1</li>
       <li>模块2</li>
        <li>模块3</li>
         <li>模块4</li>
</ul>

jq

//点击当前，显示对应模块，隐藏其它模块，再点击当前隐藏当前模块，或点击其它模块显示，并隐藏其它
	$('.navulmaiche>li').click(function(){
		var oNtrformi=$(this).index();
        //第一次显示  则显示当前隐藏其它
        if($('.navulblock>li').eq(oNtrformi).css('display')!=='flex'){
            $('.navulblock>li').eq(oNtrformi).css({'display':'flex'}).siblings().css({'display':''});
        }else{
        //不是第一次则隐藏当前
     	    $('.navulblock>li').eq(oNtrformi).css({'display':''});
        }
	})