Nick Nick - 1 month ago 16
CSS Question

Jquery slide strange behaviour

I am using jquery to make animation for my dropdown, so whenever i click it, it drops down or up. But i get strange animation. i also have custom tags and attributes used, but i dont think it's their fault.

this is jquery for animation.

$("ul").click(function(){
$(":nth-child(2)",this).slideToggle(parseInt($(":nth-child(2)",this).attr("speed")));
});


but i think it's not really jquery. it's something with 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;
}


here is fiddle i made:
https://jsfiddle.net/pcrdhk03/

Answer

Your uh must have display:block; and not display:inline-block; or it will be inline during the animations and you you the width increase.

Updated fiddle.


EDIT

You should also switch to something like that for a better animation:

DEMO

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

If you want a better animation you should start use a jquery plugin like: https://select2.github.io/