html - 更改滑出图标在待办事项列表中的位置

Question

我使用 jQuery 和 Bootstrap 创建了一个待办事项列表。当您将鼠标悬停在列表项上时，垃圾桶图标(添加到每个 li 元素内的 span 元素内的 HTML)从左侧滑出并按下向右的列表。我想让它从右侧滑出，而不移动每个列表项中的文本(出现在它的顶部)。如何做到这一点？

这是相关代码(查看 CodePen 了解更多):

HTML

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

CSS

/* 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; 
}

Answer 1

我们需要从侧面改变span

首先我们需要将li转为relative位置

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