我有 div，一旦單擊文本從Category我下面的列表更改為display: none，單擊會將其觸發為display: block。我讓那部分工作了，但我不知道如何進行過渡，以便寬度會平滑拉伸，而不是一次全部拉伸。  $(document).ready(function(){    $( '#cat' ).click(function() {      if($('#cat').hasClass('open')){          $('#cat').removeClass('open');      }      else{          $('#cat').addClass('open');      }    });  });.categories #cat{    z-index: 10;    border: 1px solid black;    padding: 10px 70px;    background-color: black;    color: white;    cursor: pointer;    outline: none;    display: inline-block;    transition: all 300ms linear;}.list{  display: none;  list-style: none;  padding: 0;  margin-top: 0 !important;  margin-bottom: 0 !important;}.list li{  display: inline-block;  margin: 0 5px;}.open .list{  display: block;}.open span{  display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="categories">      <br/>      <h1>New Collection</h1>      <br/>        <div id="cat">          <span>Categories</span>          <ul class="list">            <li>test</li>            <li>test</li>            <li>test</li>            <li>test</li>            <li>test</li>          </ul>        </div>    </div>我嘗試過添加transition: all 300ms ease-in-out和/或linear，但沒有成功。也嘗試animate()在 jquery 中使用，并且css().如何平滑地顯示元素寬度變化？