Question

您好我正在开发一个大型商务cms，我想知道是否可以在除桌面之外的所有屏幕分辨率上使用移动设备切换效果，提前谢谢

＆＃13;

 <div id="top-nav">
            <div class="CategoryList" id="TopCategoryList">
                <div class="SideCategoryListClassic">
                    <nav>
                    <ul class="category-list" style="padding-top: 3px;">
                        <li class=""><a href="/motorcycle-tire-warmers">MOTO-D Tire Warmers</a></li>
                        <li class=""><a href="/pro-series-motorcycle-stands">MOTO-D Stands</a></li>
                        <li class=""><a href="/cnc-motorcycle-parts">Bonamici Rearsets</a></li>
                        <li class=""><a href="/motorcycle-gps-lap-timer">MOTO-D "Next" GPS Lap Timer</a></li>
                        <li class=""><a href="/motorcycle-undersuits-and-baselayers">MOTO-D Undersuit</a></li>
                        <li class=""><a href="/spark-italy-exhaust-technologies">Spark Italy Exhausts</a></li>
                        <li class=""><a href="/performance-riding-motorcycle-accessories">Accessories</a></li>
                    </ul>
                    </nav>
                </div>
            </div>
            <div class="clear"></div>

＆＃13;

Answer 1

关于变体 - 使用slideToggle

$('#toggle-nav').on('click', function(e){
   e.preventDefault();
   $('#top-nav').slideToggle();
 });

Answer 2

这可以使用简单的jQuery

来完成

check the fiddle

 <div id="toggle-nav">
  Toggle
 </div>
<div id="top-nav">
        <div class="CategoryList" id="TopCategoryList">
            <div class="SideCategoryListClassic">
                <nav>
                <ul class="category-list" style="padding-top: 3px;">
                    <li class=""><a href="/motorcycle-tire-warmers">MOTO-D Tire Warmers</a></li>
                    <li class=""><a href="/pro-series-motorcycle-stands">MOTO-D Stands</a></li>
                    <li class=""><a href="/cnc-motorcycle-parts">Bonamici Rearsets</a></li>
                    <li class=""><a href="/motorcycle-gps-lap-timer">MOTO-D "Next" GPS Lap Timer</a></li>
                    <li class=""><a href="/motorcycle-undersuits-and-baselayers">MOTO-D Undersuit</a></li>
                    <li class=""><a href="/spark-italy-exhaust-technologies">Spark Italy Exhausts</a></li>
                    <li class=""><a href="/performance-riding-motorcycle-accessories">Accessories</a></li>
                </ul>
                </nav>
            </div>
        </div>
 <div class="clear"></div>

 <script>
   $('#toggle-nav').click(function(){
   $('#top-nav').toggle();
  });
 </script>

移动切换效果

2 个答案: