精简菜单和完整菜单之间进行切换
Posted wzjhoutai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了精简菜单和完整菜单之间进行切换相关的知识，希望对你有一定的参考价值。
初始显示精简菜单：
点击显示所有品牌之后，将隐藏的品牌显示，并高亮显示推荐的品牌，而且此时button的文字变为“显示精简品牌”
show you code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js"></script> <style type="text/css"> .category { clear:both; float:left; } .category ul li { width:300px; height:50px; float:left; list-style:none; } .showmore a span { margin-left:40%; display:inline-block; margin-top:50px; background-color:#1ABC9C; padding-top:20px; padding-left:100px; width:200px; height:50px; border:1px black solid; } .highlight { color:red; } </style> </head> <body> <div class="category"> <ul> <li>索尼</li> <li>爱立信</li> <li>华为</li> <li>苹果</li> <li>三星</li> <li>中兴</li> <li>联想</li> <li>富士</li> <li>可达</li> <li>雅马哈</li> <li>其它品牌</li> </ul> </div> <br/> <div class="showmore"> <a href=""><span>显示所有品牌</span></a> </div> <script type="text/javascript"> var $category = $(".category ul li:gt(6):not(:last)"); $category.hide(); var $togglebtn = $(".showmore a"); $togglebtn.click(function(){ if($category.is(":visible")){ $category.hide(); $togglebtn.html("<span>显示所有品牌</span>"); $("ul li").removeClass("highlight"); }else{ $category.show(); $togglebtn.html("<span>显示精简品牌</span>"); $("ul li").filter(":contains(‘苹果‘),:contains(‘华为‘),:contains(‘三星‘)").addClass("highlight"); } return false; }); </script> </body> </html>
我们首先通过以下的语句获得须要动态显示和隐藏的元素;
var $category = $(".category ul li:gt(6):not(:last)");
并在初始状态下将其隐藏
$category.hide();
然后获取超级链接元素：
var $togglebtn = $(".showmore a");然后对超链接元素加入click事件，在click触发的函数值中先推断$category部分是否显示
假设显示，则隐藏之。并去掉高亮显示的品牌。改动超链接内容
假设隐藏，则显示之，并为推荐品牌加入高亮属性。改动超链接内容。
由于click触发的事件中的if和else是交替运行的。所以我们能够使用toggle(event)函数进行优化。可是要说明的是：toggle(event)方法在jquery1.9之后的版本号就被废弃了，原因不明~
以上是关于精简菜单和完整菜单之间进行切换的主要内容，如果未能解决你的问题，请参考以下文章
使用导航从工具栏菜单项单击在片段之间传递数据 - Kotlin
在 Android Studio 的默认导航抽屉模板中使用按钮在片段之间切换