我用CSS和jQuery做的下拉框菜单为什么不能收回？

为什么我用CSS和jQuery做的下拉框菜单点击列表项后，列表项不能隐藏呢？下面是代码，我查了半天还是搞不定，JavaScript写的有问题？“<!DOCTYPEhtml... 为什么我用CSS和jQuery做的下拉框菜单点击列表项后，列表项不能隐藏呢？下面是代码，我查了半天还是搞不定，JavaScript写的有问题？
“<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉选择框</title>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<style>
body,p,ul{
margin: 0;
padding: 0;
}
body{
background-color: #0c9;
color: #333;
}
.container{
padding-top: 5%;
}
.container .select{
width: 200px;height: 40px;
margin: 0 auto;
font-family:"microsoft yahei";
font-size: 16px;
background-color: #fff;
position: relative;
}
.container .select:after{
content: "";
display: block;
width: 10px;
height: 10px;
border-left: 1px #ccc solid;
border-bottom: 1px #ccc solid;
position: absolute;
top: 11px;
right: 12px;
transform:rotate(-45deg);
transition:transform .3s ease-out,top .3s ease-out;
}
.container .select p {
padding: 0 15px;
line-height: 40px;
cursor: pointer;
}
.container .select ul{
list-style-type: none;
background-color: #fff;
width: 100%;
overflow-y:auto;
position: absolute;
top: 40px;
left: 0;
max-height: 0;
transition:max-height .3s ease-out;
}
.container .select ul li{
padding: 0 15px;
line-height: 40px;
cursor: pointer;
}
.container .select ul li:hover{
background-color: #e0e0e0;
}
.container .select ul li .selacted{
background-color: #39f;
color: #fff;
}
@-weblit-keyframes slide-down{
%0{transform: scale(1,0);}
%25{transform: scale(1,1.2);}
%50{transform: scale(1,0.85);}
%75{transform: scale(1,1.05);}
%100{transform: scale(1,1);}
}
.container .select.open ul{
max-height: 250px;
transform-origin:50% 0;
-webkit-animation:slide-down .5s ease-in;
transition:max-height .2s ease-out;
}
.container .select.open:after{
transform:rotate(-225deg);
top: 18px;
transition:all .3s ease-in;
}
</style>
<script type="text/javascript">
$(function(){
$(".select > p").on("click",function(){
$(".select").toggleClass("open");
e.stopPropagation();
});
$(".select ul li").on("click",function(){
var _this = $(this);
$(".select>p").text(_this.attr("datevalue"));
_this.addClass("selected").sibings().removeClass("selected");
$(".select").removeClass("open");
e.stopPropagation();
});
});
</script>
</head>
<body>
<div class="container">
<div class="select">
<p>所有内容</p>
<ul>
<li datevalue="所有选项" class="selected">所有选项</li>
<li datevalue="java">java</li>
<li datevalue="Photoshop">Photoshop</li>
<li datevalue="html">html</li>
<li datevalue="css">css</li>
</ul>
</div>
</div>
</body>
</html>” 展开
 我来答
4个回答
#热议# 上班途中天气原因受伤算工伤吗？
dispose
2015-10-20 · TA获得超过642个赞
知道小有建树答主
回答量：458
采纳率：0%
帮助的人：483万
我也去答题访问个人页
展开全部 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉选择框</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <style>
    body,p,ul{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #0c9;
        color: #333;
    }
    .container{
        padding-top: 5%;
    }
    .container .select{
        width: 200px;height: 40px;
        margin: 0 auto;
        font-family:"microsoft yahei";
        font-size: 16px;
        background-color: #fff;
        position: relative;
    }
    .container .select:after{
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-left: 1px #ccc solid;
        border-bottom: 1px #ccc solid;
        position: absolute;
        top: 11px;
        right: 12px;
        transform:rotate(-45deg);
        transition:transform .3s ease-out,top .3s ease-out;
    }
    .container .select p {
        padding: 0 15px;
        line-height: 40px;
        cursor: pointer;
    }
    .container .select ul{
        list-style-type: none;
        background-color: #fff;
        width: 100%;
        overflow-y:auto;
        position: absolute;
        top: 40px;
        left: 0;
        max-height: 0;
        transition:max-height .3s ease-out;
    }
    .container .select ul li{
        padding: 0 15px;
        line-height: 40px;
        cursor: pointer;
    }
    .container .select ul li:hover{
        background-color: #e0e0e0;
    }
    .container .select ul li .selacted{
        background-color: #39f;
        color: #fff;
    }
    @-weblit-keyframes slide-down{
        %0{transform: scale(1,0);}
        %25{transform: scale(1,1.2);}
        %50{transform: scale(1,0.85);}
        %75{transform: scale(1,1.05);}
        %100{transform: scale(1,1);}
    }
    .container .select.open ul{
        max-height: 250px;
        transform-origin:50% 0;
        -webkit-animation:slide-down .5s ease-in;
        transition:max-height .2s ease-out;
    }
    .container .select.open:after{
        transform:rotate(-225deg);
        top: 18px;
        transition:all .3s ease-in;
    }
    </style>
    <script type="text/javascript">
    $(function(){
        $(".select > p").on("click",function(e){ //e 参数没加
            $(".select").toggleClass("open");
            e.stopPropagation();
        });
        $(".select ul li").on("click",function(e){//e 参数没加
            var _this = $(this);
            $(".select>p").text(_this.attr("datevalue"));
           _this.addClass("selected").siblings().removeClass("selected"); //siblings 写错
           $(".select").removeClass("open");
           e.stopPropagation();
       });
    });
    </script>
</head>
<body>
    <div class="container">
        <div class="select">
            <p>所有内容</p>
            <ul>
            <li datevalue="所有选项" class="selected">所有选项</li>
            <li datevalue="java">java</li>
            <li datevalue="Photoshop">Photoshop</li>
            <li datevalue="html">html</li>
            <li datevalue="css">css</li>
            </ul>
        </div>
    </div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
匿名用户
2015-10-20
展开全部
<script type="text/javascript">
$(function(){
$(".select > p").on("click",function(){
$(".select").toggleClass("open");
e.stopPropagation();
});
$(".select ul li").on("click",function(){
var _this = $(this);
$(".select>p").text(_this.attr("datevalue"));
_this.addClass("selected").sibings().removeClass("selected");
$(".select").removeClass("open");
e.stopPropagation();
});
});
</script>

这个代码里面有问题。
e.stopPropagation()，e从何而来？
on("click",function()
的function(e) 里面要加上e.

sibings()这个单词写错了吧。
siblings()

附修改后的html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉选择框</title>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<style>
body,p,ul{
margin: 0;
padding: 0;
}
body{
background-color: #0c9;
color: #333;
}
.container{
padding-top: 5%;
}
.container .select{
width: 200px;height: 40px;
margin: 0 auto;
font-family:"microsoft yahei";
font-size: 16px;
background-color: #fff;
position: relative;
}
.container .select:after{
content: "";
display: block;
width: 10px;
height: 10px;
border-left: 1px #ccc solid;
border-bottom: 1px #ccc solid;
position: absolute;
top: 11px;
right: 12px;
transform:rotate(-45deg);
transition:transform .3s ease-out,top .3s ease-out;
}
.container .select p {
padding: 0 15px;
line-height: 40px;
cursor: pointer;
}
.container .select ul{
list-style-type: none;
background-color: #fff;
width: 100%;
overflow-y:auto;
position: absolute;
top: 40px;
left: 0;
max-height: 0;
transition:max-height .3s ease-out;
}
.container .select ul li{
padding: 0 15px;
line-height: 40px;
cursor: pointer;
}
.container .select ul li:hover{
background-color: #e0e0e0;
}
.container .select ul li .selacted{
background-color: #39f;
color: #fff;
}
@-weblit-keyframes slide-down{
%0{transform: scale(1,0);}
%25{transform: scale(1,1.2);}
%50{transform: scale(1,0.85);}
%75{transform: scale(1,1.05);}
%100{transform: scale(1,1);}
}
.container .select.open ul{
max-height: 250px;
transform-origin:50% 0;
-webkit-animation:slide-down .5s ease-in;
transition:max-height .2s ease-out;
}
.container .select.open:after{
transform:rotate(-225deg);
top: 18px;
transition:all .3s ease-in;
}
</style>
<script type="text/javascript">
$(function(){
$(".select > p").on("click",function(e){
$(".select").toggleClass("open");
e.stopPropagation();
});
$(".select ul li").on("click",function(e){
var _this = $(this);
$(".select>p").text(_this.attr("datevalue"));
_this.addClass("selected").siblings().removeClass("selected");
$(".select").removeClass("open");
e.stopPropagation();
});
});
</script>
</head>
<body>
<div class="container">
<div class="select">
<p>所有内容</p>
<ul>
<li datevalue="所有选项" class="selected">所有选项</li>
<li datevalue="java">java</li>
<li datevalue="Photoshop">Photoshop</li>
<li datevalue="html">html</li>
<li datevalue="css">css</li>
</ul>
</div>
</div>
</body>
</html>
追问
你好，还有个问题，为什么动画效果显示不出来呢？
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
happyababf4
2015-10-20 · 超过34用户采纳过TA的回答
知道答主
回答量：155
采纳率：0%
帮助的人：63.2万
我也去答题访问个人页
展开全部
<script type="text/javascript">
$(function(){
$(".select > p").on("click",function(){
$(".select").toggleClass("open");
e.stopPropagation();
});
$(".select ul li").on("click",function(){
var _this = $(this);
$(".select>p").text(_this.attr("datevalue"));
// _this.addClass("selected").sibings().removeClass("selected");
$(".select").removeClass("open");
e.stopPropagation();
});
});
</script>
拿走不谢
追问
谢了可还有个问题，为什么动画效果显示不出来呢？
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
百度网友0498059
2015-10-20 · TA获得超过259个赞
知道小有建树答主
回答量：286
采纳率：75%
帮助的人：185万
我也去答题访问个人页
展开全部
_this.addClass("selected").sibings().removeClass("selected");
里面的sibings写错了，应该是siblings
追问
你好，还有个问题，为什么动画效果显示不出来呢？
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 更多回答（2）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式