孟垂博自媒体博客|只做精品

首页 > 网站教程 > js效果  >  jquery滑动折叠显示或隐藏菜单特效小技巧this

<!doctype html>

<html lang="en">

<head>

<title>jquery滑动折叠显示或隐藏菜单特效的在线演示</title>

</head>

<body style="text-align:center"><br><br>

  <div class="menu">菜单一<a href="javascript:void(0)" class="ml-3">显示</a></div>

  <ul class="list-unstyled">

    <li>子菜单1.1</li>

    <li>子菜单1.2</li>

    <li>子菜单1.3</li>

  </ul>

  <div class="menu">菜单二<a href="javascript:void(0)" class="ml-3">显示</a></div>

  <ul class="list-unstyled">

    <li>子菜单2.1</li>

    <li>子菜单2.2</li>

    <li>子菜单2.3</li>

  </ul>

<script language="javascript">

$("div.menu a").on("click",function(){

  var t=$(this).text()=="显示"?"隐藏":"显示";

  $(this).text(t);

var smenu=$(this).parent("div.menu").next("ul");

  smenu.slideToggle();

});

</script>

</body>

</html>

    分享:

    微信

    发表评论