更改待办事项列表中滑出图标的位置 [英] Change placement of slide-out icon on to-do list
问题描述
我用jQuery和Bootstrap创建了一个待办事项列表。当您将鼠标悬停在列表项目上时，每个 li 中的垃圾桶图标（添加到HTML中的范围内元素c>元素）在左侧滑出并将列表向右推。我希望将其从右侧滑出，而不移动每个列表项中的文本（出现在其顶部）。这如何实现？
以下是相关的代码（查看 CodePen < a> for more）： HTML CSS code> span 来自两边 首先，我们需要将 然后我们可以改变跨度的方向 希望这有助于：） I created a to-do list with jQuery and Bootstrap. When you hover over a list item, a trashcan icon (added to the HTML inside a Here's the relevant code (view CodePen for more): HTML CSS
We need to change the First we need to turn the Then we can change thwe side of the span Hope this helps :)
这篇关于更改待办事项列表中滑出图标的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< ul>
< i>< span>< i class =fa fa-trash>< / i>< / span>在一小时内完成项目工作< / li>
< li>< span>< i class =fa fa-trash>< / i>< / span>去散步< / li>
< i>< span>< i class =fa fa-trash>< / i>< / span>打坐< / li>
< span>< i class =fa fa-trash>< / i>< / span> Stretch< / li>
< / ul>
/ *样式Bootstrap垃圾桶图标* /
span {
background：＃e74c3c;
height：40px;
width：0px;
display：inline-block;
opacity：0;
margin-right：20px;
text-align：center;
颜色：白色;
转换：0.2s线性;
}
$ b $ / *当用户将鼠标悬停在li上时，设置span内容的外观（Bootstrap垃圾桶图标）* /
li：hover span {
width：40px ; / *适用于图标背景* /
不透明度：1.0;
}
li 到相对仓位
li {
保证金：20px;
职位：亲属;
}
span {
margin-right：0px;
位置：绝对;
right：0;
}
body {margin：0; font-family：Roboto，sans-serif;背景：＃642B73;背景：-webkit-linear-gradient（向右，＃C6426E，＃642B73）;背景：线性渐变（向右，＃C6426E，＃642B73）;} h1 {background：＃642B73;白颜色;保证金：0; padding：10px 20px;文字转换：大写; font-size：24px; font-weight：normal;} ul {list-style：none;保证金：0; padding：0;} li {background：white; height：40px; line-height：40px;颜色：＃666;位置：相对; * / li：nth-child（偶数）{background：＃f7f7f7;} / *样式Bootstrap垃圾桶图标* / span {background：＃e74c3c; height：40px; width：0px;显示：inline-block;不透明度：0; / * margin-right：20px; * / text-align：center;白颜色;过渡：0.2s线性;位置：绝对;右：0;} / *当用户悬停在li上时，设置span内容的外观（引导垃圾桶图标）* / li：hover span {width：40px; / *适用于图标背景* /不透明度：1.0; } input {font-size：1em;背景：＃f7f7f7;宽度：100％; height：40px; / *第一行文本顶部到第二行顶部的距离* / line-height：40px; / *顺序：顶部，右侧，底部，左侧* / padding：13px 13px 13px 20px; / *在元素的总宽和高中包含填充和边框* / box-sizing：border-box; -webkit-box-sizing：border-box; -moz-box-sizing：border-box;颜色：＃C6426E; border：3px solid rgba（0，0，0，0）;} / *设置用户点击时输入框边界的外观* / input：focus {background：white; border：3px solid＃642B73; outline：none;}。completed {color：gray; text-decoration：line-through;}。fa-plus {float：right;位置：相对; top：5px;}。container {margin：100px auto;背景：＃f7f7f7;宽度：360px; box-shadow：0 0 50px rgba（0,0,0,0.1）;}
< HTML> < HEAD> < meta charset =UTF-8> < meta name =viewportcontent =width = device-width，initial-scale = 1.0> < meta http-equiv =X-UA-Compatiblecontent =ie = edge> < title>待办事项列表< / title> < link href =https://fonts.googleapis.com/css?family=Roboto:400,500,700 =stylesheet> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css> < link rel =stylesheethref =styles.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script> < script src =script.js>< / script> < /头> <身体GT; < div class =container> < h1>待办事项列表< i class =fa fa-plus>< / i>< / h1> < input type =textplaceholder =Add new> < UL> < i>< span>< i class =fa fa-trash>< / i>< / span>在一小时内完成项目工作< / li> < i>< span>< i class =fa fa-trash>< / i>< / span>去散步< / li> < i>< span>< i class =fa fa-trash>< / i>< / span>打坐< / li> < i>< span>< i class =fa fa-trash>< / i>< / span> Stretch< / li> < / UL> < / DIV> < / body>< / html> span element within each of the the li elements) slides out on the left side and pushes the list toward the right. I would like to instead have it slide out from the right side, without moving the text in each list item (appearing over top of it). How can this be accomplished? <ul>
<li><span><i class="fa fa-trash"></i></span>Work on projects for one hour</li>
<li><span><i class="fa fa-trash"></i></span>Go for a walk</li>
<li><span><i class="fa fa-trash"></i></span>Meditate</li>
<li><span><i class="fa fa-trash"></i></span>Stretch</li>
</ul>
/* Styles Bootstrap trash can icon */
span {
background: #e74c3c;
height: 40px;
width: 0px;
display: inline-block;
opacity: 0;
margin-right: 20px;
text-align: center;
color: white;
transition: 0.2s linear;
}
/* When user hovers over li, sets appearance of span content (Bootstrap trash can icon) */
li:hover span {
width: 40px; /* Applies to icon background */
opacity: 1.0;
}
span from sidesli to a relative positionli {
margin-left: 20px;
position: relative;
}
span {
margin-right: 0px;
position: absolute;
right: 0;
}
$(function() {
let degree = 90;
// Rotates '+' and drops down or recloses input box on click
$('.fa-plus').on('click', function() {
if (degree === 135) {
degree = 45;
}
// Sets CSS transform properties. Selector 'this' refers to '+' (with class '.fa-plus') being clicked
$(this).css({
'-webkit-transform': 'rotate(' + degree + 'deg)',
'-moz-transform': 'rotate(' + degree + 'deg)',
'-ms-transform': 'rotate(' + degree + 'deg)',
'-o-transform': 'rotate(' + degree + 'deg)',
'transform': 'rotate(' + degree + 'deg)',
'transition': '0.2s linear'
});
degree += 45;
// Animates opacity of text box, setting its display style property to none once its opacity reaches 0 if it's visible, or the inverse if already hidden
$('input[type="text"]').fadeToggle();
});
// Checks off specific items upon click and adds them to class 'completed'
$('ul').on('click', 'li', function() {
$(this).toggleClass('completed');
});
// Click to delete
$('ul').on('click', 'span', function(e) {
// fadeOut() hides element by setting it to transparent
$(this).parent().fadeOut(500, function() {
// Removes element along with its data and events
$(this).remove();
});
// Prevents event from bubbling up DOM tree, notifying any parent handlers of it
e.stopPropagation();
});
$('input[type="text"]').on('keypress', function(e) {
// If user hits enter...
if (e.which === 13) {
// Grabs new to-do list item from input
let itemText = $(this).val();
// If nothing in input box, ceases function execution
if (itemText === '') return;
// Clears input box
$(this).val('');
// Creates new li from input and adds to beginning of ul
$('ul').prepend('<li><span><i class="fa fa-trash"></i></span> ' + itemText + '</li>');
}
});
});body {
margin: 0;
font-family: Roboto, sans-serif;
background: #642B73;
background: -webkit-linear-gradient(to right, #C6426E, #642B73);
background: linear-gradient(to right, #C6426E, #642B73);
}
h1 {
background: #642B73;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
background: white;
height: 40px;
line-height: 40px;
color: #666;
position: relative;
margin-left: 20px;
}
/* Sets color of even li elements */
li:nth-child(even) {
background: #f7f7f7;
}
/* Styles Bootstrap trash can icon */
span {
background: #e74c3c;
height: 40px;
width: 0px;
display: inline-block;
opacity: 0;
/* margin-right: 20px; */
text-align: center;
color: white;
transition: 0.2s linear;
position: absolute;
right: 0;
}
/* When user hovers over li, sets appearance of span content (Bootstrap trash can icon) */
li:hover span {
width: 40px; /* Applies to icon background */
opacity: 1.0;
}
input {
font-size: 1em;
background: #f7f7f7;
width: 100%;
height: 40px;
/* distance from the top of the first line of text to the top of the second */
line-height: 40px;
/* Order: top, right, bottom, left */
padding: 13px 13px 13px 20px;
/* Includes padding and border in element's total width and height */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
color: #C6426E;
border: 3px solid rgba(0, 0, 0, 0);
}
/* Sets appearance of input box boundaries when user clicks inside */
input:focus {
background: white;
border: 3px solid #642B73;
outline: none;
}
.completed {
color: grey;
text-decoration: line-through;
}
.fa-plus {
float: right;
position: relative;
top: 5px;
}
.container {
margin: 100px auto;
background: #f7f7f7;
width: 360px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To-Do List</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>To-Do List<i class="fa fa-plus"></i></h1>
<input type="text" placeholder="Add new">
<ul>
<li><span><i class="fa fa-trash"></i></span>Work on projects for one hour</li>
<li><span><i class="fa fa-trash"></i></span>Go for a walk</li>
<li><span><i class="fa fa-trash"></i></span>Meditate</li>
<li><span><i class="fa fa-trash"></i></span>Stretch</li>
</ul>
</div>
</body>
</html>
