我正在使用jquery为我的下拉列表制作动画，因此每当我点击它时，它就会下降或上升。但我得到了奇怪的动画。我也使用自定义标签和属性，但我不认为这是他们的错。
这是动画的jquery。
$("ul").click(function(){
$(":nth-child(2)",this).slideToggle(parseInt($(":nth-child(2)",this).attr("speed")));
});
但我认为它不是真正的jquery。它与css有关。
ul{
display:inline-block;
font-family:arial;
border: 1px solid gray;
text-align:left;
}
uh{
display:inline-block;
}
li{
list-style:none;
font-size:14px;
color:#525252;
cursor:default;
}
li:hover{
background-color:#CFCFCF;
}
这里是小提琴： https://jsfiddle.net/pcrdhk03/
答案 0 :(得分：1)
您的uh必须有display:block;而不是display:inline-block;，否则它会在动画中内嵌，而您的宽度会增加。
更新了fiddle。
修改
你也应该切换到类似的东西以获得更好的动画：
$(document).ready(function() {
$("hold").hide();
$("ul").click(function() {
$("hold", this).slideToggle(parseInt($("hold", this).attr("speed")));
});
$("li").click(function() {
var p = $(this).parents();
$("uh", p).html($(this).html());
$("li.hided", p).removeClass('hided');
$(this).addClass('hided');
});
});ul {
display: inline-block;
font-family: arial;
border: 1px solid gray;
text-align: left;
}
uh {
display: block;
}
li {
list-style: none;
font-size: 14px;
color: #525252;
cursor: default;
}
li:hover {
background-color: #CFCFCF;
}
.hided {
display:none;
}<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<ul>
<uh>Volksvagen</uh>
<hold speed="300">
<li class="hided">Volksvagen</li>
<li>Renault</li>
<li>BMW</li>
<li>car</li>
<li>behicle</li>
<li>Subaru</li>
</hold>
</ul>
</body>
如果你想要一个更好的动画，你应该开始使用一个jquery插件，如： https://select2.github.io/