eg.Select





 



 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Title</title>
 6   <style>
 7     body {background-color: #eee;}
 8     #select_language {margin: 150px auto;}
 9     .select_box {width: 100px;height: 24px;}
10     .select_box .tag_select {cursor: pointer;color: #030e0a;width: 100px;height: 24px;padding: 0 10px;line-height: 24px;border: 2px solid #1f7a5c;border-radius: 8px;}
11     .select_box .tag_options {width: 100px;padding: 0 0 5px;margin: 0;display: none;}
12     .select_box .tag_options li {cursor: pointer;color: #030e0a;height: 24px;line-height: 24px;padding: 0 10px;margin: 2px 0;border-radius: 8px;}
13     .select_box .tag_options li:hover {background-color: #a0e7cf;}
14     .select_box .tag_options .open_selected,
15     .select_box .tag_options .open_selected:hover{
16       background-color: #2cb185;
17     }
18   </style>
19   <script>
20     $(".select_box .tag_select").bind("click", function () {
21       var $self = $(this);
22       $self.parent().find(".tag_options").slideDown();
23       $self.parent().hover(function () {
24       }, function () {
25         $self.parent().find(".tag_options").slideUp();
26       });
27       $(".tag_options li").bind("click", function () {
28         var $self = $(this);
29         $self.addClass("open_selected").siblings().removeClass("open_selected");
30         $self.parents().find(".tag_select").html($self.html());
31         $self.parents().find(".tag_options").slideUp();
32       });
33     });
34   </script>
35 </head>
36 <body>
37 <div id="select_language" class="select_box">
38   <div id="select_info_language" class="tag_select">中文</div>
39   <ul id="options_language" class="tag_options">
40     <li class="open_selected">中文</li>
41     <li>英语</li>
42     <li>日本语</li>
43     <li>俄语</li>
44     <li>葡萄牙语</li>
45   </ul>
46 </div>
47 <script src="js/jquery-1.7.2.min.js"></script>
48 </body>
49 </html>

 

posted @ 2017-02-23 00:16  mudeng007  阅读(122)  评论(0)    收藏  举报