Question

我试图通过点击ul元素来设置li元素的动画。（类似于BS折叠）最初所有li元素都是隐藏的。

我的标记是：

<ul title="mounting" id="0" class="39 mountin" data-color="anthrazit">
Mounting
<li id="0" class="261">
    <div class="label"><strong>grey</strong>
    </div>
</li>
<li id="1" class="262">
    <div class="label"><strong>black</strong>
    </div>
</li>
<li id="2" class="263">
    <div class="label"><strong>white</strong>
    </div>
</li>
</ul>

<ul title="earpad" id="3" class="39 earpad" data-color="red">
Earpad
<li id="4" class="261">
    <div class="label"><strong>grey</strong>
    </div>
</li>
<li id="5" class="262">
    <div class="label"><strong>black</strong>
    </div>
</li>
<li id="6" class="263">
    <div class="label"><strong>white</strong>
    </div>
</li>
</ul>

我的jquery代码是：

$('#navi ul:not(.open)').click(function(){
    $('#navi ul li').hide();
    $('#navi ul').removeClass('open');
    $(this).find('li').slideDown();
    $(this).addClass('open');
});

点击ul会打开带有slideDown动画的li。我面临的问题是：当我单击其中一个现在可见的li元素时，它会从头开始动画。我不知道如何解决这个问题。

Answer 1

这里你可以找到一些例子

https://cssanimation.rocks/list-items/

请检查。我希望它有所帮助

Answer 2

你需要这样的行为吗？

$(document).ready(function() {
  $('#navi ul:not(.open)').click(function(e) {
    if ($(e.target).prop("tagName") == "UL") {
      $('#navi ul li').hide();
      $('#navi ul').removeClass('open');
      $(this).find('li').slideDown();
      $(this).addClass('open');
    }
  });
});

.open {
  display: block;
}

ul li {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="navi">
  <ul title="mounting" id="1" class="39 mounting" data-color="anthrazit">
    Mounting
    <li id="0" class="261">
      <div class="label"><strong>grey</strong>
      </div>
    </li>
    <li id="1" class="262">
      <div class="label"><strong>black</strong>
      </div>
    </li>
    <li id="2" class="263">
      <div class="label"><strong>white</strong>
      </div>
    </li>
  </ul>
</div>

Answer 3

它的行为就是这样，因为当你单击li时，也会点击父ul，因此你的.click事件会被触发。

从open

中删除ul element课程

<div id="navi">
  <ul title="mounting" id="1" class="39 mounting" data-color="anthrazit">
    Mounting
    <li id="0" class="261">
      <div class="label"><strong>grey</strong>
      </div>
    </li>
    <li id="1" class="262">
      <div class="label"><strong>black</strong>
      </div>
    </li>
    <li id="2" class="263">
      <div class="label"><strong>white</strong>
      </div>
    </li>
  </ul>
</div>

现在相应地更改您的Javascript

$(document).ready(function() {
  $('#navi ul:not(.open)').click(function(e) {
    if ($(e.target).hasClass("39")) {
      $('#navi ul li').hide();
      $('#navi ul').removeClass('open');
      $(this).find('li').slideDown();
      $(this).addClass('open');
    }
  });
});

    if ($(e.target).hasClass("39")) { //`this line will tell the code that if UL is clicked then only do the rest`

Answer 4

你可以比你做的更简单：

＆＃13;

ul li {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="nav">Mounting </div>
<ul title="mounting" id="0" class="39 mountin" data-color="anthrazit">
    
    <li id="0" class="261">
        <div class="label"><strong>grey</strong>
        </div>
    </li>
    <li id="1" class="262">
        <div class="label"><strong>black</strong>
        </div>
    </li>
    <li id="2" class="263">
        <div class="label"><strong>white</strong>
        </div>
    </li>
</ul>

<div class="nav">Mounting 2</div>
<ul title="mounting" id="3" class="39 mountin" data-color="anthrazit">
    
    <li id="4" class="261">
        <div class="label"><strong>grey</strong>
        </div>
    </li>
    <li id="5" class="262">
        <div class="label"><strong>black</strong>
        </div>
    </li>
    <li id="6" class="263">
        <div class="label"><strong>white</strong>
        </div>
    </li>
</ul>

</body>

＆＃13;

it('should have the right html', function () {
    Ext.Msg.alert('Title', 'Awesome, all went well');

    ST.panel('messagebox')
      .gotoComponent('[cls=x-window-text]')
      .get('html')
      .and(function () {
          expect(this.future.data.html).toBe('Awesome, all went well');
      }); 
});

＆＃13;

li元素的jquery动画

4 个答案: