文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery幻灯片奇怪的行为

问Jquery幻灯片奇怪的行为
EN

Stack Overflow用户

提问于 2016-10-29 20:14:02

回答 1查看 31关注 0票数 0

我使用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/

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-29 20:16:21

您的uh必须有display:block;而不是display:inline-block;，否则在动画期间它将是内联的，并且您的宽度会增加。

更新的小提琴。

编辑

为了获得更好的动画，您还应该切换到类似的内容：

演示

$(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/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40323265

复制

相似问题

问Jquery幻灯片奇怪的行为
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery幻灯片奇怪的行为EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery幻灯片奇怪的行为
EN