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

回答

相關問題