手风琴面板在我通过JavaScript添加“show”类时未滑动。

huangapple go评论59阅读模式
英文:

Accordion panel is not sliding when I'm adding "show" class by Javascript

问题

我在处理手风琴,点击另一个链接时打开一个面板 <div id="open">打开</div>。但是它没有平稳地打开。然而,当我点击卡片标题时,它打开得非常顺畅。如何实现这一点?

html

&lt;div id=&quot;accordion&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;div class=&quot;card-header&quot; id=&quot;headingOne&quot;&gt;
      &lt;h5 class=&quot;mb-0&quot;&gt;
        &lt;button class=&quot;btn btn-link&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
          可折叠组项 #1
        &lt;/button&gt;
      &lt;/h5&gt;
    &lt;/div&gt;

    &lt;div id=&quot;collapseOne&quot; class=&quot;collapse&quot; aria-labelledby=&quot;headingOne&quot; data-parent=&quot;#accordion&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        动物拍卖底价胡椒,生活方式指责特里·理查德森广告乌贼。3只狼月官方署理,非求爱滑板痛苦早午餐。食品卡车藜麦未知的劳动力。早午餐3狼月时间,太阳眼镜雀鸟单一来源的咖啡无所作为舍尔迪奇和。尼希尔动画头巾赫尔维蒂卡,手工啤酒劳伦·威斯·安德森信用未知的智者东西蓝色。
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;div id=&quot;open&quot;&gt;打开它&lt;/div&gt;
&lt;/div&gt;

function

&lt;script&gt;
    $(document).on(&#39;click&#39;, &#39;#open&#39;, function () {
        $(&#39;#collapseOne&#39;).toggleClass(&#39;show&#39;)
    })
&lt;/script&gt;
英文:

I'm working on accordion, And Opening a panel on click on another link &lt;div id=&quot;open&quot;&gt;Open It&lt;/div&gt;. but It's not opening smoothly. However when I open by click on card header it's opening very smoothly. How to achieve this?

html

&lt;div id=&quot;accordion&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;div class=&quot;card-header&quot; id=&quot;headingOne&quot;&gt;
      &lt;h5 class=&quot;mb-0&quot;&gt;
        &lt;button class=&quot;btn btn-link&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
          Collapsible Group Item #1
        &lt;/button&gt;
      &lt;/h5&gt;
    &lt;/div&gt;

    &lt;div id=&quot;collapseOne&quot; class=&quot;collapse&quot; aria-labelledby=&quot;headingOne&quot; data-parent=&quot;#accordion&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&#39;t heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;div id=&quot;open&quot;&gt;Open It&lt;/div&gt;
&lt;/div&gt;

function

&lt;script&gt;
    $(document).on(&#39;click&#39;, &#39;#open&#39;, function () {
        $(&#39;#collapseOne&#39;).toggleClass(&#39;show&#39;)
    })
&lt;/script&gt;

答案1

得分: 1

根据你的类/数据,看起来你正在使用Bootstrap 4折叠

当使用像Bootstrap这样的库时,最好使用提供的API,例如:

$(document).on('click', '#open', function () {
    $('#collapseOne').collapse('toggle');
})

如果你只想显示而不是切换,还有其他选项,如.collapse("show")

使用Bootstrap更新的fiddle:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
$(document).on('click', '#open', function() {
  $('#collapseOne').collapse('toggle');
})

<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="httpscdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          可折叠组项 #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

  <div id="open">切换内容</div>
</div>

<!-- end snippet -->
英文:

From your classes/data- it looks like you're using bootstrap 4 accordion.

When using a library such as bootstrap, it's prudent to use the API provided, in this case:

$(document).on(&#39;click&#39;, &#39;#open&#39;, function () {
    $(&#39;#collapseOne&#39;).collapse(&#39;toggle&#39;)
})

There are other options such as .collapse(&quot;show&quot;) if you want to only show and not toggle.

Updated fiddle with bootstrap:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).on(&#39;click&#39;, &#39;#open&#39;, function() {
  $(&#39;#collapseOne&#39;).collapse(&#39;toggle&#39;)
})

<!-- language: lang-html -->

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js&quot; integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

&lt;div id=&quot;accordion&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;div class=&quot;card-header&quot; id=&quot;headingOne&quot;&gt;
      &lt;h5 class=&quot;mb-0&quot;&gt;
        &lt;button class=&quot;btn btn-link&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
          Collapsible Group Item #1
        &lt;/button&gt;
      &lt;/h5&gt;
    &lt;/div&gt;

    &lt;div id=&quot;collapseOne&quot; class=&quot;collapse&quot; aria-labelledby=&quot;headingOne&quot; data-parent=&quot;#accordion&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven&#39;t heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div id=&quot;open&quot;&gt;Toggle Content&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

你可以使用 .slideToggle()

$(document).on('click', '#open', function () {
    $('#collapseOne').slideToggle()
})
#collapseOne { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
I'm working on accordion, And Opening a panel on click on another link <div id="open">Open It</div>. but It's not opening smoothly. However when I open by click on card header it's opening very smoothly. How to achieve this?

html

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  
  <div id="open">Open It</div>
</div>
英文:

You can use .slideToggle()

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).on(&#39;click&#39;, &#39;#open&#39;, function () {
        $(&#39;#collapseOne&#39;).slideToggle()
    })

<!-- language: lang-css -->

#collapseOne { display:none }

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js&quot;&gt;&lt;/script&gt;
I&#39;m working on accordion, And Opening a panel on click on another link &lt;div id=&quot;open&quot;&gt;Open It&lt;/div&gt;. but It&#39;s not opening smoothly. However when I open by click on card header it&#39;s opening very smoothly. How to achieve this?

html

&lt;div id=&quot;accordion&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;div class=&quot;card-header&quot; id=&quot;headingOne&quot;&gt;
      &lt;h5 class=&quot;mb-0&quot;&gt;
        &lt;button class=&quot;btn btn-link&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
          Collapsible Group Item #1
        &lt;/button&gt;
      &lt;/h5&gt;
    &lt;/div&gt;

    &lt;div id=&quot;collapseOne&quot; class=&quot;collapse&quot; aria-labelledby=&quot;headingOne&quot; data-parent=&quot;#accordion&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&#39;t heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;div id=&quot;open&quot;&gt;Open It&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月27日 17:22:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/75578653.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定