澳门威斯尼人平台登录JavaScript制作的可折叠弹出式菜单示例_javascript技巧_脚本之家

可折叠弹出式菜单

Selected Shakespeare Plays

.horizontal {
 float: left;
 list-style: none;
 margin: 10px;
}

然后,在js中添加CSS支持

$('#selected-plays > li').addClass('horizontal');

现在的效果如下:

复制代码 代码如下:

效果如下:

Shakespeare's Plays

Comdeis

  • All's Well That Ends Well
  • As You Like It
  • Love's Labour's Lost
  • The Comedy of Errors

Tragedies

  • Anthony & Cleopatra
  • Hamlet
  • Romeo & Juliet

Histories

  • Henry IV, Part1
  • Henry IV, Part2

Henry V

Henry IV (email)

    chapter2-1
    <script type="text/javascript" src="jquery-1.10.2.js"></script>
    <script type="text/javascript" src="chapter02.js"></script>




 Selected Shakespeare Plays

第2章:元素的选择

Tragedies

  1. CSS选择器

请看下面的菜单:

Richard II

Comedies

Selector type CSS jQuery 说明
Tag name p {} $('p') 对整个网页中标签有效
ID #some-id {} $('#some-id') 对网页中指定id有效
Class .some-class {} $('.some-class') 对网页中相同类名有效

chapter02.html

  • As You Like It
  • All's Well That Ends Well
  • A Midsummer Night's Dream
  • Twelfth Night

Histories

jQuery之所以强大,是因为他很容易的利用CSS和DOM!

形象的比喻:左手是DOM,右手是CSS。

Selected Shakespeare Plays

  • Comedies As You Like ItAll's Well That Ends WellA Midsummer Night's DreamTwelfth Night
  • Tragedies HamletMacbethRomeo and Juliet
  • Histories Henry IV (email) Part IPart II Henry VRichard II
在上面的jQuery代码中,我们发现一个新的符号“&gt;”!

这个符号表示:子元素。

$('#selected-plays &gt; li')

指定id="selected-plays"的子元素li(tag
name),即Comedies、Tragedies、Histories行。

那么,怎么才能选择所有的li元素(子元素,孙元素,重孙元素...
^_^)呢?

$('#selected-plays li')

对,你没有看错!就是用空格替代“&gt;”即完成。



我们想除了三个子元素以外的所有li元素的背景设置为灰色。

CSS:

    .sub-level {
     background: #ccc;
    }


JS:

     $('#selected-plays li:not(.horizontal)').addClass('sub-level');


实现效果如下:

Selected Shakespeare Plays
==========================

-   Comedies
-   As You Like It
-   All's Well That Ends Well
-   A Midsummer Night's Dream
-   Twelfth Night
-   Tragedies
-   Hamlet
-   Macbeth
-   Romeo and Juliet
-   Histories
-   Henry IV (email)
-   Part I
-   Part II
-   Henry V
-   Richard II  













    附:

    chapter02.css

        @charset "utf-8";
        /* CSS Document */

        .horizontal {
         float: left;
         list-style: none;
         margin: 10px;
        }
        .sub-level {
         background: #ccc;
        }


    chapter02.js

        $(document).ready(function() {
            $('#selected-plays > li').addClass('horizontal');
         // add
         $('#selected-plays li:not(.horizontal)').addClass('sub-level');
        });



    http://www.bkjia.com/Javascript/633250.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/633250.htmlTechArticle第2章:元素的选择 The
    jQuery library harnesses the power of Cashcading Style
    Sheets(CSS) selectors to let us quickly and easily access
    elements or groups of elements in Doc...
    The jQuery library harnesses the power of Cashcading Style Sheets(CSS) selectors 
    to let us quickly and easily access elements or groups of elements in Document Object Model(DOM).
  • Part I
  • Part II
  • Hamlet
  • Macbeth
  • Romeo and Juliet

本文由澳门威斯尼人平台登录发布于服务器&运维,转载请注明出处:澳门威斯尼人平台登录JavaScript制作的可折叠弹出式菜单示例_javascript技巧_脚本之家

相关阅读