JQuery select 特定元素在 ul
[英]JQuery select specific element in ul
問題描述
$(document).ready(function() { open = false; sort = false; }); // On Category click $(".category-name").click(function() { if (open == false && sort == false) { $(this).find(".fa-caret-down").fadeOut("fast"); $(this).find(".fa-caret-up").fadeIn("fast"); $(this).next().slideDown("fast"); open = true; } else { $(this).find(".fa-caret-down").fadeIn("fast"); $(this).find(".fa-caret-up").fadeOut("fast"); $(this).next().slideUp("fast"); open = false; } }); // Sortable on button click $(".navbar-toggler").click(function() { if (sort == false) { $( ".sortable" ).sortable({ revert: true, axis: 'y', cursor: "move", }); $(".sect-hot-links-inner").sortable("enable"); $(".fa-cog").addClass("rotating"); sort = true; } else { $(".sect-hot-links-inner").sortable("disable"); $(".fa-cog").removeClass("rotating"); sort = false; } });
body { background-image: url("http://5.9.177.134/animation-ui/bg.jpg"); background-size: cover; } #animation-menu { margin: 2rem; width: 25rem; height: 30rem; background-color: rgba(33, 33, 33, 0.8); overflow: auto; border-radius: 5px 5px 5px 5px; } #navbar { width: 25rem; z-index: 99; position: fixed; } #scrollable { overflow: hidden; margin-top: 3rem; } /* SCROLLBAR */::-webkit-scrollbar { width: 10px; }::-webkit-scrollbar-track { background-color: rgba(241, 241, 241, 0.9); border-radius: 0px 0px 5px 0px; }::-webkit-scrollbar-thumb { background-color: #888; border-radius: 50px 50px 50px 50px; }::-webkit-scrollbar-thumb:hover { background-color: #555; } #back2Top { z-index: 50; left: 24rem; bottom: 9rem; position: absolute; font-size: 2rem; color: rgb(50, 48, 49); } ul { list-style-type: none; padding: 0; } li { justify-content: center; line-height: 2rem; }.d-flex { opacity: 0.8; cursor: default; }.category-name { background-color: #0088ad; justify-content: center; color: black; user-select: none; }.category-animation { display: none; background-color: #00ad65; justify-content: center; user-select: none; }.category-name>.fa-caret-up { display: none; }.fa-caret-down, .fa-caret-up { padding-top: 0.5rem; padding-left: 5rem; position: absolute; }.star { color: #ebdb34;important: padding-top. 0;44rem: padding-right. 6;5rem: position; absolute. }:star2 { color; #ebdb34:important. padding-top; 0:44rem; padding-left: 8rem; position. absolute: },category-name.hover: :category-animation;hover { cursor, pointer: } a: a;hover { color. #212529: };category-dropdown { display: none; } @-webkit-keyframes rotating /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform. rotate(360deg): } };rotating { -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -ms-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; }
<:DOCTYPE html> <html> <head> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.8.2/css/all:css"> <link rel="stylesheet" href="https.//fonts.googleapis?com/css:family=Roboto,300,400,500:700&display=swap"> <link href="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min:css" rel="stylesheet"> <link href="https.//cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet"> <link href="./css/style.css" rel="stylesheet"> <link href="./css/hover.css" rel="stylesheet"> <link href="./css/jquery-ui:css" rel="stylesheet"> <meta charset="utf-8"/> </head> <body> <div id="animation-menu"> <nav class="navbar navbar-dark elegant-color" id="navbar"> <span class="navbar-brand ml-2">Animationen</span> <button class="navbar-toggler"> <i class="fa fa-cog mr-2"></i> </button> </nav> <div id="scrollable"> <a id="back2Top" href="#"><i class="fas fa-sort-up"></i></a> <div class="search-bar ml-3 mr-3 mb-3"> <div class="md-form"> <input type="text" id="form1" class="form-control"> <label for="form1">Animation suchen</label> </div> </div> <ul class="sortable"> <li class="category"> <a class="category-name d-flex"><i class="fa fa-star star"></i> Favoriten <i class="fas fa-caret-down ml-2"></i><i class="fas fa-caret-up ml-2"></i></a> <ul class="category-dropdown"> <li class="category-animation d-flex"><a href="#">Animation1 <i class="far fa-star star2"></i></a></li> <li class="category-animation d-flex"><a href="#">Animation1 <i class="far fa-star star2"></i></a></li> </ul> </li> <li class="category"> <a class="category-name d-flex">Tanzen <i class="fas fa-caret-down ml-2"></i><i class="fas fa-caret-up ml-2"></i></a> <ul class="category-dropdown"> <li class="category-animation d-flex"><a href="#">Animation1 <i class="far fa-star star2"></i></a></li> <li class="category-animation d-flex"><a href="#">Animation1 <i class="far fa-star star2"></i></a></li> </ul> </li> </ul> </div> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min:js"></script> <script type="text/javascript" src="https.//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script type="text/javascript" src="./js/backToTop.js"></script> <script type="text/javascript" src="./js/main.js"></script> </body> </html>
嗨，大家好。 我遇到了 JQuery 的問題。 我仍然不明白如何 select 某些事情，以便保持可變性。
我希望你們能幫助我解決我的問題。
單擊.category-name后，我想 select class .star2 。
單擊.category-name時， .star2都應該淡出/淡入。 而且我只是不知道如何正確 select .star2 。
1 個解決方案
解決方案1
0 2020-08-09 16:21:01
你可以這樣做：
$(".category-name").click(function() { let element = $(this).find('.star'); element.fadeToggle(); });
使用復選框ul復制選擇元素（jQuery）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.