li元素的jquery动画

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

我的标记是：

<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元素之一时，它从头开始动画。我不知道如何解决这个问题。

来源

2017-05-31 Mamulasa

可以请您分享CSS吗？ – vijayP

这是不好的做法，有多个元素具有相同的'ID'，ID的应该是唯一的 –

@Mamulasa检查我的回答 – SilverSurfer

在这里你可以找到一些例子

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

请检查。我希望它帮

来源

2017-05-31 11:47:37 user2960398

您是否需要这样的行为：

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

来源

2017-05-31 11:50:46 vijayP

它表现为这样的，因为当你点击李时珍，父UL还与点击，你的。点击事件被解雇。从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>

删除open类现在改变你的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`

来源

2017-05-31 11:54:54

它会引发错误：“未捕获TypeError：$（...）。prop不是函数” – Mamulasa

@MamulasaI编辑了代码。请看 –

好吧，看起来不错。但是：我更新了我的代码。我有超过一个ul。你的建议只适用于一个UL。你能帮我吗？ – Mamulasa

你可以做到这一点更简单妳比这样做：

$(".nav").click(function(event){ 
 
    $("ul li").slideToggle("slow") 
 
});

ul li { 
 
    display: none 
 
}

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

来源

2017-05-31 12:02:39 SilverSurfer

你没有解决OP的问题。他的问题是他不希望滑动发生在'li'被点击时。你需要照顾的 –

@FurquanKhan是的，编辑，现在它工作正常 – SilverSurfer

由于我有超过一个UL元素，这将只打开一个ul内的li元素。我怎样才能打开这两个李的元素？ – Mamulasa

li元素的jquery动画

回答

相关问题