JQ는 애니메이션 탐색 예제 코드를 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JQ는 애니메이션 탐색 예제 코드를 구현합니다.

Jul 20, 2017 pm 03:00 PM

생기 항해 아코디언

1. 아코디언 스타일 탐색은 모바일과 PC 모두에서 사용할 수 있습니다

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            *{
                list-style: none;
                padding: 0;
                margin: 0;
            }
            ul{
                display: none;
            }
            h3{
                background-color: blue;
                width: 100px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid chartreuse;
                margin: 0 auto;
            }
            ul&gt;li{
                background-color: chartreuse;
                width: 100px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid red;
                margin: 0 auto;
            }&lt;/style&gt;
        &lt;script src=&quot;../js/jquery-3.1.1.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;//            通过jq的滑入滑出动画可作出手风琴式的导航栏$(document).ready(function(){//jq准备函数$("h3").on("click",function(){
                    $("h3").next().slideUp();//当前元素之下的节点$(this).next().stop(true).slideToggle();//使用间歇                })
            })&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h3&gt;语文&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;语文1&lt;/li&gt;
            &lt;li&gt;语文2&lt;/li&gt;
            &lt;li&gt;语文3&lt;/li&gt;
            &lt;li&gt;语文4&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3&gt;数学&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;数学1&lt;/li&gt;
            &lt;li&gt;数学2&lt;/li&gt;
            &lt;li&gt;数学3&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3&gt;英语&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;英语1&lt;/li&gt;
            &lt;li&gt;英语2&lt;/li&gt;
            &lt;li&gt;英语3&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3&gt;地理&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;地理1&lt;/li&gt;
            &lt;li&gt;地理2&lt;/li&gt;
            &lt;li&gt;地理3&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3&gt;政治&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;政治1&lt;/li&gt;
            &lt;li&gt;政治2&lt;/li&gt;
            &lt;li&gt;政治3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

2. 드롭다운 탐색은 PC 측면에 적합합니다.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;ul{
                list-style: none;
                margin-left: 35%;
            }
            ul li{float: left;
                width: 100px;
                height: 30px;
                background-color: deeppink;
                line-height: 30px;
                text-align: center;
                margin-left: 5px;
            }
            ul li&gt;ul{
                margin-left: -45px;
                margin-top: 5px;
                display: none;
            }&lt;/style&gt;
        &lt;script src=&quot;../js/jquery-3.1.1.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;$(document).ready(function(){
                $("#ul&gt;li").hover(function(){//通过hover效果对该元素进行动画$(this).find("ul").stop().slideDown();//找到当前目标元素下的所有子节点下滑                },function(){
                    $(this).find("ul").stop().slideUp();//找到当前目标元素下的所有子节点上滑                })
            })&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;ul id=&quot;ul&quot;&gt;
            &lt;li&gt;去岁一别&lt;ul&gt;
                    &lt;li&gt;一年&lt;/li&gt;
                    &lt;li&gt;两年&lt;/li&gt;
                    &lt;li&gt;三年&lt;/li&gt;
                    &lt;li&gt;四年&lt;/li&gt;
                    &lt;li&gt;五年&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;救赎问候&lt;ul&gt;
                    &lt;li&gt;一次&lt;/li&gt;
                    &lt;li&gt;两次&lt;/li&gt;
                    &lt;li&gt;三次&lt;/li&gt;
                    &lt;li&gt;四次&lt;/li&gt;
                    &lt;li&gt;五次&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;深感愧疚&lt;ul&gt;
                    &lt;li&gt;一句&lt;/li&gt;
                    &lt;li&gt;两句&lt;/li&gt;
                    &lt;li&gt;三句&lt;/li&gt;
                    &lt;li&gt;四句&lt;/li&gt;
                    &lt;li&gt;五句&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

C3의 새로운 속성을 사용하여 더 많은 탐색 스타일이 있습니다. 애니메이션을 활용하여 다양한 스타일의 네비게이션이 구현될 것입니다.

위 내용은 JQ는 애니메이션 탐색 예제 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.