列表子元素

时间：2018-05-23 14:55:55

标签： jquery html css

我按照以下方式创建响应大小的卡片。

当我点击卡片上的编辑按钮时，卡片会获得box-shadow，但它会向上移动。当我取消/保存输入时它再次移动。为什么会这样？

这次我使用display: block / inline-block将所有内容放在卡片中，之前我使用display: table-cell但我在调整元素大小时遇到​​问题，因此我更改了定位方法。

任何帮助表示赞赏：）

＆＃13;
＆＃13; 
$(".card").click(function() {
  if ($(this).val() == 0) {
    $(this).addClass("clicked");
    $(this).val(1);
  }
  else {
    $(this).removeClass("clicked");
    $(this).val(0);
  }
});

$(".action").click(function() {
  var thisCard = $(this).parent().parent();
  thisCard.addClass("edit");
  thisCard.find(".title").css({"display": "none"});
  thisCard.find(".action").css({"display": "none"});
  thisCard.find(".action-edit").css({"display": "table-cell"});
  thisCard.find(".input-group").css({"display": "table-cell"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".input-main").val(thisCard.find(".title").text());
  }
  else {
    thisCard.find(".input-main").val(thisCard.find(".title-main").text());
    thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
  }
  thisCard.find(".input-main").focus();
  thisCard.removeClass("clicked");
});

$(".check").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.find(".title").css({"display": "table-cell"});
  thisCard.find(".action").css({"display": "table-cell"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".title").text(thisCard.find(".input-main").val());
  }
  else {
    thisCard.find(".title-main").text(thisCard.find(".input-main").val());
    thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
  }
  thisCard.removeClass("clicked");
});

$(".cancel").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.find(".title").css({"display": "table-cell"});
  thisCard.find(".action").css({"display": "table-cell"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  thisCard.removeClass("clicked");
});
＆＃13; 
.card-wrapper {
  width: calc(100% - 48px);
  height: 100%;
  border-left: dashed 1px #ccc;
  border-right: dashed 1px #ccc;
  padding: 48px 16px 0;
  background-color: #fff;
}

.card-row {
  width: 100%;
}

.card-cell {
  display: inline-block;
  width: calc(100% / 6 - 20px);
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
}

.card {
  width: 100%;
  height: 70px;
  border-radius: 3px;
  background-color: #F8f8f8;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  font-size: 16px;
  cursor: pointer;
  border: solid 1px transparent;
}

.card .content {
  display: block;
  width: 100%;
}

.card .content .title,
.card .content .input {
  padding: 24px 0 24px 24px;
  font-size: 16px;
  color: #333;
  display: inline-block;
  width: calc(100% - 80px);
}

.card .content .title {
  white-space: nowrap;
  overflow: hidden;
}

.card .content .input {
  display: none;
}

.input-main,
.input-sub {
  border: none;
  font-size: 13px;
  border-bottom: solid 1px #c4c4c4;
  width: 100%;
}

input:focus {
  outline-style:none;
  box-shadow:none;
  border-bottom: solid 1px #c4c4c4;
}

.card .content .action {
  width: 24px;
  padding: 24px 20px 24px 12px;
  text-align: right;
  display: inline-block;
  vertical-align: top;
  float: right;
}

.card .content .action-edit {
  display: none;
  width: 36px;
  padding: 0;
  border-left: solid 1px #c4c4c4;
  vertical-align: top; 
}

.check,
.cancel {
  height: 34.5px;
  text-align: center;
}

.action-edit > .check i,
.action-edit >.cancel i {
  line-height: 35px;
  font-size: 13px;
}

.cancel i {
  color: #333;
}

.check i {
  color: #00c983; 
}

.check-tall,
.cancel-tall {
  height: 45.5px;
}

.check-tall i,
.cancel-tall i {
  line-height: 46px !important;
}

.cancel {
  border-bottom: solid 1px #c4c4c4; 
}

.card .content .action i {
  font-size: 14px; 
  color: #333;
}

.card .content .action i:hover {
  color: #00c983; 
}

.clicked {
  background-color: #CAF1FF;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
}

.edit {
  background-color: #fff;
  border: solid 1px #00c983;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
}

.subtitle {
  font-size: 12px; 
}

.subtitle-label {
  color: #999; 
}

.input-sub {
  font-size: 12px;
}

.input-sub-line {
  display: table-row; 
  width: 100%;
}

.input-sub-label {
  display: table-cell; 
  width: 25%;
  font-size: 12px;
  color: #999;
}

.input-sub {
  display: table-cell; 
  width: 100%;
}

.input-group {
  display: none; 
  padding: 22px 24px;
}

.populate-card {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

@media (max-width: 1199px) and (min-width: 768px) {
  .card-cell {
    width: calc(100% / 4 - 20px);
  }
}

@media (max-width: 767px) and (min-width: 576px) {
  .card-cell {
    width: calc(100% / 3 - 20px);
  }
}

@media (max-width: 575px) {
  .card-cell {
    width: 100%;
    padding-left: 0;
  }
}
＆＃13; 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">

<div class="card-wrapper">
  <ul class="card-row">
    <li class="card-cell">
      <div class="card card-first" value=0>
        <div class="content">
          <div class="title">Administration</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Agriculture</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Architecture</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Arts and Design</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Civil</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card card-last" value=0>
        <div class="content">
          <div class="title">Computer</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
  </ul>
<div class="caption">1-Attribute Card</div>

<div class="card" value=0>
  <div class="content">
    <div class="title"><span class="title-main">Bank Central Asia</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">014</span></span></div>
    <div class="input-group">
      <input type="text" class="input-main">
      <div class="input-sub-line">
        <div class="input-sub-label">Code</div> 
        <input class="input-sub" type="text"></div>
    </div>
    <div class="action"><i class="fas fa-pencil-alt"></i></div>
    <div class="action-edit">
      <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
      <div class="check check-tall"><i class="fas fa-check"></i></div>
    </div>
  </div>
</div>
<div class="caption">2-Attributes Card</div>
  <a class="button white-btn footer-btn populate-card">Populate</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

在.cancel点击事件中，您应为display: inline-block和table-cell元素设置.title而不是.action。

您还必须将vertical-align: top添加到.card-cell课程。

此处已更新jsfiddle

答案 1 :(得分：2)

这是因为当您接受或拒绝编辑时，您的铅笔按钮和标题仍然显示为table-cell，而不是display: table包装，因为它应该是

答案 2 :(得分：1)

＆＃13;
＆＃13; 
$(".card").click(function() {
  if ($(this).val() == 0) {
    $(this).addClass("clicked");
    $(this).val(1);
  } else {
    $(this).removeClass("clicked");
    $(this).val(0);
  }
});

$(".action").click(function() {
  var thisCard = $(this).parent().parent();
  thisCard.addClass("edit");
  thisCard.find(".title").css({
    "display": "none"
  });
  thisCard.find(".action").css({
    "display": "none"
  });
  thisCard.find(".action-edit").css({
    "display": "table-cell"
  });
  thisCard.find(".input-group").css({
    "display": "table-cell"
  });
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".input-main").val(thisCard.find(".title").text());
  } else {
    thisCard.find(".input-main").val(thisCard.find(".title-main").text());
    thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
  }
  thisCard.find(".input-main").focus();
  thisCard.removeClass("clicked");
});

$(".check").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.find(".title").css({
    "display": "inline-block"
  });
  thisCard.find(".action").css({
    "display": "table-cell"
  });
  thisCard.find(".action-edit").css({
    "display": "none"
  });
  thisCard.find(".input-group").css({
    "display": "none"
  });
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".title").text(thisCard.find(".input-main").val());
  } else {
    thisCard.find(".title-main").text(thisCard.find(".input-main").val());
    thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
  }
  thisCard.removeClass("clicked");
});

$(".cancel").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.find(".title").css({
    "display": "inline-block"
  });
  thisCard.find(".action").css({
    "display": "table-cell"
  });
  thisCard.find(".action-edit").css({
    "display": "none"
  });
  thisCard.find(".input-group").css({
    "display": "none"
  });
  thisCard.removeClass("clicked");
});
＆＃13; 
.card-wrapper {
  width: calc(100% - 48px);
  height: 100%;
  border-left: dashed 1px #ccc;
  border-right: dashed 1px #ccc;
  padding: 48px 16px 0;
  background-color: #fff;
}

.card-row {
  width: 100%;
}

.card-cell {
  display: inline-block;
  width: calc(100% / 6 - 20px);
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
}

.card {
  width: 100%;
  height: 70px;
  border-radius: 3px;
  background-color: #F8f8f8;
  box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
  font-size: 16px;
  cursor: pointer;
  border: solid 1px transparent;
}

.card .content {
  display: block;
  width: 100%;
}

.card .content .title,
.card .content .input {
  padding: 24px 0 24px 24px;
  font-size: 16px;
  color: #333;
  display: inline-block;
  width: calc(100% - 80px);
}

.card .content .title {
  white-space: nowrap;
  overflow: hidden;
}

.card .content .input {
  display: none;
}

.input-main,
.input-sub {
  border: none;
  font-size: 13px;
  border-bottom: solid 1px #c4c4c4;
  width: 100%;
}

input:focus {
  outline-style: none;
  box-shadow: none;
  border-bottom: solid 1px #c4c4c4;
}

.card .content .action {
  width: 24px;
  padding: 24px 20px 24px 12px;
  text-align: right;
  display: inline-block;
  vertical-align: top;
  float: right;
}

.card .content .action-edit {
  display: none;
  width: 36px;
  padding: 0;
  border-left: solid 1px #c4c4c4;
  vertical-align: top;
}

.check,
.cancel {
  height: 34.5px;
  text-align: center;
}

.action-edit>.check i,
.action-edit>.cancel i {
  line-height: 35px;
  font-size: 13px;
}

.cancel i {
  color: #333;
}

.check i {
  color: #00c983;
}

.check-tall,
.cancel-tall {
  height: 45.5px;
}

.check-tall i,
.cancel-tall i {
  line-height: 46px !important;
}

.cancel {
  border-bottom: solid 1px #c4c4c4;
}

.card .content .action i {
  font-size: 14px;
  color: #333;
}

.card .content .action i:hover {
  color: #00c983;
}

.clicked {
  background-color: #CAF1FF;
  box-shadow: 0px 0px 32px 0 rgba(0, 153, 255, 0.3);
}

.edit {
  background-color: #fff;
  border: solid 1px #00c983;
  box-shadow: 0px 0px 32px 0 rgba(0, 153, 255, 0.3);
}

.subtitle {
  font-size: 12px;
}

.subtitle-label {
  color: #999;
}

.input-sub {
  font-size: 12px;
}

.input-sub-line {
  display: table-row;
  width: 100%;
}

.input-sub-label {
  display: table-cell;
  width: 25%;
  font-size: 12px;
  color: #999;
}

.input-sub {
  display: table-cell;
  width: 100%;
}

.input-group {
  display: none;
  padding: 22px 24px;
}

.populate-card {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

@media (max-width: 1199px) and (min-width: 768px) {
  .card-cell {
    width: calc(100% / 4 - 20px);
  }
}

@media (max-width: 767px) and (min-width: 576px) {
  .card-cell {
    width: calc(100% / 3 - 20px);
  }
}

@media (max-width: 575px) {
  .card-cell {
    width: 100%;
    padding-left: 0;
  }
}
＆＃13; 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">

<div class="card-wrapper">
  <ul class="card-row">
    <li class="card-cell">
      <div class="card card-first" value=0>
        <div class="content">
          <div class="title">Administration</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Agriculture</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Architecture</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Arts and Design</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Civil</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card card-last" value=0>
        <div class="content">
          <div class="title">Computer</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <div class="caption">1-Attribute Card</div>

  <div class="card" value=0>
    <div class="content">
      <div class="title"><span class="title-main">Bank Central Asia</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">014</span></span>
      </div>
      <div class="input-group">
        <input type="text" class="input-main">
        <div class="input-sub-line">
          <div class="input-sub-label">Code</div>
          <input class="input-sub" type="text"></div>
      </div>
      <div class="action"><i class="fas fa-pencil-alt"></i></div>
      <div class="action-edit">
        <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
        <div class="check check-tall"><i class="fas fa-check"></i></div>
      </div>
    </div>
  </div>
  <div class="caption">2-Attributes Card</div>
  <a class="button white-btn footer-btn populate-card">Populate</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题