jquery怎样在手机里面进行列表模式的切换

时间：2024-11-11 08:51:53

1、第一步引入图标字体的css和jquery.js<link rel="stylesheet" href="../../css/fontIcons/iconfont.css" />注：你需要自己去网上下载，你也可以用bootstrap的图标字体<script src="../../js/jquery.js"></script>具体代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../../css/fontIcons/iconfont.css" /> <style> </style> </head> <body> <div> <span class="list_btn"> <span class="iconfont icon-Thumbnails"></span> </span> <div class="search_wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> <script src="../../js/jquery.js"></script> <script > </script> </body></html>

2、第二步你可以先考虑切换图标字体的问题，然后再进行下面内容的切换1）通过点击时做的切换，首咸犴孜稍先我们先写一个点击事件$(function(){ 艘早祓胂 $('.list_btn').on('click',function(){ }) }) </script>2）我们是通过class类来切换我们字体图标的图片这里我们需要利用find ,addClass和removeClass的方法$(function(){ $('.list_btn').on('click',function(){ $('.list_btn').find('.iconfont').removeClass('icon-Thumbnails').addClass('icon-List'); }) })3）考虑到我们只能点击一下情况，我们需要它连续点击怎么办，这时我们就需要运用jquery中hasClass做if判断$(function(){ $('.list_btn').on('click',function(){ if($('.list_btn').find('.iconfont').hasClass('icon-Thumbnails')){ $('.list_btn').find('.iconfont').removeClass('icon-Thumbnails').addClass('icon-List'); } else{ $('.list_btn').find('.iconfont').removeClass('icon-List').addClass('icon-Thumbnails'); } }) })注：具体代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../../css/fontIcons/iconfont.css" /> <style> .li{ list-style: none; display: inline-block; width:20%; padding-left: 20px; text-align: center; } </style> </head> <body> <div> <span class="list_btn"> <span class="iconfont icon-Thumbnails"></span> </span> <div class="search_wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> <script src="../../js/jquery.js"></script> <script > $(function(){ $('.list_btn').on('click',function(){ if($('.list_btn').find('.iconfont').hasClass('icon-Thumbnails')){ $('.list_btn').find('.iconfont').removeClass('icon-Thumbnails').addClass('icon-List'); } else{ $('.list_btn').find('.iconfont').removeClass('icon-List').addClass('icon-Thumbnails'); } }) }) </script> </body></html>

3、第三步你得思考图标下面的内容是相同只是布局不一样，所以我们的思路是建立一个类，用这个类来改变这个布局，从而只需要通过jquery中toggleClass来切换即可代码如下：<稆糨孝汶;style> .li{ list-style: none; display: inline-block; width:20%; padding-left: 20px; text-align: center; } </style>js部分 $(".search_wrap ul li").toggleClass("li")组合起来代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../../css/fontIcons/iconfont.css" /> <style> .li{ list-style: none; display: inline-block; width:20%; padding-left: 20px; text-align: center; } </style> </head> <body> <div> <span class="list_btn"> <span class="iconfont icon-Thumbnails"></span> </span> <div class="search_wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> <script src="../../js/jquery.js"></script> <script > $(function(){ $('.list_btn').on('click',function(){ if($('.list_btn').find('.iconfont').hasClass('icon-Thumbnails')){ $('.list_btn').find('.iconfont').removeClass('icon-Thumbnails').addClass('icon-List'); } else{ $('.list_btn').find('.iconfont').removeClass('icon-List').addClass('icon-Thumbnails'); } $(".search_wrap ul li").toggleClass("li") }) }) </script> </body></html>