使用js和jquery按下向上和向下按钮时如何交换DIV数据？

【问题标题】：How to swap inside DIV data when up and down button press using js and jquery?使用js和jquery按下向上和向下按钮时如何交换DIV数据？
【发布时间】：2018-10-02 14:03:34
【问题描述】：

我有工作代码。其中我有一个时间表。并且时间轴内的每个事件都是相互连接的。

这是一个删除特定数据的删除按钮。还有另一个复制数据。 但是当我点击向上按钮和向下按钮时，我想要。

就像我点击向上按钮一样。它应该将第三个元素数据交换为第二个数据，将第二个数据交换为第三个数据。 并且在向下按钮上同样工作。 这是工作示例代码，请参阅。 我们将不胜感激。

$(document).ready(function() {
  $("#edit_button").click(function() {
    $("#slide").css("display", "none");
  })
  $("#slide section").attr("contenteditable", "true");
  var i = 1;
  $("section").each(function() {
    $(this).attr("id", i);
    $(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>");
    $(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>");
    $(this).append("<div class='deleteStyle3'>" + "&#x2191" + "</div>");
    $(this).append("<div class='deleteStyle4'>" + "h" + "</div>");
    i++;
  });

  $("#slide").on('click', '.deleteStyle', function() {
    $(this).parent("section").remove()
  });
  $("#slide").on('click', '.deleteStyle2', function() {
    var ele = $(this).closest("section").clone(true);
    $(this).closest("section").after(ele);
  });
  $("#slide").on('click', '.deleteStyle4', function() {
    var currentData = $(this).parent().next().html();
    var currentString = "<section>" + currentData + "</section>";
    console.log(currentString)
    var abc1 = $(this).next().replaceWith(currentString);
    console.log(abc1)
  });
  $("#slide").on('click', '.deleteStyle3', function() {
    var previousData = $(this).parent().prev().html();
    var previousString = "<section>" + previousData + "</section>";
    console.log(previousString)
    var abc = $(this).prev().replaceWith(previousString);
    console.log(abc)
    // $(this).parent().remove().html();
    // $(this).closest("section").after(previousString);


    // $(this).closest("section").before(currentString);
    //   	console.log(currentData);
    //   	console.log(previousData);

  });


});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
  margin: auto;
  width: 500px;
  z-index: 100;
  opacity: 1;
  border-left: 4px solid #00BCD4;
  border-top: 1px solid grey;
  min-height: 130px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: relative;
  top: 50px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}


/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
	opacity:1;
} 
*/

div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: .2rem;
  background: white;
  height: 55px;
}

div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -56px;
  width: .2rem;
  background: grey;
  height: 54px;
}

div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(16px, 23px);
  font-size: 30px;
  font-family: arial;
  padding: 3px;
  position: relative;
  word-wrap: break-word;
  line-height: 31px;
}

div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
  transform: translate(12px, 14px);
  color: black;
  font-size: 20px;
  font-family: arial;
  position: relative;
  padding: 9px;
  word-wrap: break-word;
  line-height: 31px;
}

div[type="timeline"]>section:last-of-type::after {
  display: none;
}

div[type="slideshow"] {
  height: 471px;
  position: relative;
  top: 100px;
}

div[type="slideshow"]>section:not(.hideClass) {
  margin: auto;
  width: 900px;
  max-height: 265px;
  z-index: 100;
  border-top: 1px solid grey;
  border-left: 4px solid #00BCD4;
  min-height: 250px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: absolute;
  overflow-x: hidden;
  top: 21.4%;
  left: 168px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}

div[type="slideshow"]>section:not(.hideClass)>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(93px, 32px);
  font-size: 34px;
  font-family: arial;
  position: relative;
  word-wrap: break-word;
}

div[type="slideshow"]>section:not(.hideClass)>article {
  transform: translate(87px, 39px);
  max-width: 800px;
  color: black;
  font-size: 22px;
  font-family: arial;
  position: relative;
  padding: 10px;
  word-wrap: break-word;
}


/*.activeClass{    
	opacity: 1 !important;
}
*/

.hideClass {
  opacity: 0;
  min-height: 0 !important;
  margin: 0 !important;
}

.hideClass header,
.hideClass article {
  display: none;
}

@keyframes fadein {
  0% {
    opacity: 0
  }
  50% {
    opacity: 0.5
  }
  100% {
    opacity: 1
  }
}

div[type="timeline"] br {
  display: none;
}

.progressClass {
  height: 4px;
  display: none;
  top: 46px;
  left: 0px;
  width: 100%;
  position: fixed;
  margin-left: -1px;
  margin-top: -1px;
}

.color_arrow {
  position: relative;
  top: 228px;
  color: #085153;
  left: 93px;
}

.color_arrows {
  position: relative;
  top: 228px;
  color: #085153;
  left: 94% !important;
}

@media only screen and (max-width: 992px) {
  div[type="timeline/slideshow"]>section,
  div[type="timeline"]>section {
    width: 650px;
  }
  .color_arrow {
    left: -18px;
  }
  div[type="slideshow"]>section:not(.hideClass) {
    width: 640px;
    left: 14px;
  }
  .color_arrows {
    left: 99% !important;
  }
}

@media only screen and (max-width: 992px) {
  div[type="slideshow"]>section {
    width: 650px;
  }
  div[type="slideshow"]>section:not(.hideClass) {
    width: 640px;
    left: 18px;
  }
}

@media only screen and (min-width: 1201px) and (max-width: 1299px) {
  div[type="slideshow"]>section:not(.hideClass) {
    width: 845px;
    left: 154px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  div[type="slideshow"]>section:not(.hideClass) {
    width: 698px;
    left: 136px;
  }
}

#slide {
  display: block;
}

.edit_timeline {
  margin: 4%;
}

.containers {
  font-weight: 800;
  font-style: arial;
  font-size: 24px;
  width: 500px;
  height: 100px;
  margin: 2%;
  border: 1px solid grey;
}

#modal_timeline {
  margin-left: 25px;
}

.deleteStyle {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 10px;
  padding-top: 5px;
  float: right;
  right: 12px;
  bottom: 80px;
  color: white;
}

.deleteStyle2 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 10px;
  padding-top: 5px;
  float: right;
  right: 17px;
  bottom: 80px;
  color: white;
}

.deleteStyle3 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 12px;
  padding-top: 5px;
  float: right;
  right: 20px;
  bottom: 80px;
  color: white;
}

.deleteStyle4 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 12px;
  padding-top: 5px;
  float: right;
  right: 24px;
  bottom: 80px;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
  <div type="timeline" id="slide">
    <section>
      <header>Title One</header>
      <article>Content one</article>
    </section>
    <section>
      <header>Title Two</header>
      <article>Content one</article>
    </section>
    <section>
      <header>Title Three</header>
      <article>Content one</article>
    </section>
    <section>
      <header>Title Four</header>
      <article>Content one</article>
    </section>
  </div>

</div>

<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>

【问题讨论】：

  • 正在寻找 keyup 和 keydown 事件？
  • 是这样交换数据
  • 你能让你的代码最小化但完整吗？
  • 请不要专注于 css 请看我的 js 非常简单，我得到了控制台上下事件的数据。如何交换数据。
  • 我推荐你参考这个 JSfiddle 。 jsfiddle.net/HarishSTOnline/ex984xL0/1我想这正是你想要做的！

标签： javascript jquery html replace


【解决方案1】：

请参考 jsfiddle 以供参考。在这里，鼠标向下和向上键按下的项目将被选中。 https://jsfiddle.net/webdev_sudhi/avudyb2t/3/

$(document).ready(function() {
    $("#edit_button").click(function() {
        $("#slide").css("display", "none");
    })
    $("#slide section").attr("contenteditable", "true");
    var i = 1;
    $("section").each(function() {
        $(this).attr("id", i);
        $(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>");
        $(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>");
        $(this).append("<div class='deleteStyle3'>" + "&#x2191" + "</div>");
        $(this).append("<div class='deleteStyle4'>" + "h" + "</div>");
        i++;
    });

    $("#slide").on('click', '.deleteStyle', function() {
        $(this).parent("section").remove()
    });
    $("#slide").on('click', '.deleteStyle2', function() {
        var ele = $(this).closest("section").clone(true);
        $(this).closest("section").after(ele);
    });
    $("#slide").on('click', '.deleteStyle4', function() {
        var currentData = $(this).parent().next().html();
        var currentString = "<section>" + currentData + "</section>";
        console.log(currentString)
        var abc1 = $(this).next().replaceWith(currentString);
        console.log(abc1)
    });
    $("#slide").on('click', '.deleteStyle3', function() {

				//added new code here
        var previousData = $(this).parent().prev();

        $preTitle = $(previousData).find('header').text();
        $preContent = $(previousData).find('article').text();

        $(this).parent().find('header').text($preTitle);
        $(this).parent().find('article').text($preContent);
        //end here 
        
        var previousString = "<section>" + previousData + "</section>";
        console.log(previousString)
        var abc = $(this).prev().replaceWith(previousString);
        console.log(abc)
        // $(this).parent().remove().html();
        // $(this).closest("section").after(previousString);


        // $(this).closest("section").before(currentString);
        //   	console.log(currentData);
        //   	console.log(previousData);

    });


});
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
  margin: auto;
  width: 500px;
  z-index: 100;
  opacity: 1;
  border-left: 4px solid #00BCD4;
  border-top: 1px solid grey;
  min-height: 130px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: relative;
  top: 50px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}


/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
	opacity:1;
} 
*/

div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: .2rem;
  background: white;
  height: 55px;
}

div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -56px;
  width: .2rem;
  background: grey;
  height: 54px;
}

div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(16px, 23px);
  font-size: 30px;
  font-family: arial;
  padding: 3px;
  position: relative;
  word-wrap: break-word;
  line-height: 31px;
}

div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
  transform: translate(12px, 14px);
  color: black;
  font-size: 20px;
  font-family: arial;
  position: relative;
  padding: 9px;
  word-wrap: break-word;
  line-height: 31px;
}

div[type="timeline"]>section:last-of-type::after {
  display: none;
}

div[type="slideshow"] {
  height: 471px;
  position: relative;
  top: 100px;
}

div[type="slideshow"]>section:not(.hideClass) {
  margin: auto;
  width: 900px;
  max-height: 265px;
  z-index: 100;
  border-top: 1px solid grey;
  border-left: 4px solid #00BCD4;
  min-height: 250px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: absolute;
  overflow-x: hidden;
  top: 21.4%;
  left: 168px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}

div[type="slideshow"]>section:not(.hideClass)>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(93px, 32px);
  font-size: 34px;
  font-family: arial;
  position: relative;
  word-wrap: break-word;
}

div[type="slideshow"]>section:not(.hideClass)>article {
  transform: translate(87px, 39px);
  max-width: 800px;
  color: black;
  font-size: 22px;
  font-family: arial;
  position: relative;
  padding: 10px;
  word-wrap: break-word;
}


/*.activeClass{    
	opacity: 1 !important;
}
*/

.hideClass {
  opacity: 0;
  min-height: 0 !important;
  margin: 0 !important;
}

.hideClass header,
.hideClass article {
  display: none;
}

@keyframes fadein {
  0% {
    opacity: 0
  }
  50% {
    opacity: 0.5
  }
  100% {
    opacity: 1
  }
}

div[type="timeline"] br {
  display: none;
}

.progressClass {
  height: 4px;
  display: none;
  top: 46px;
  left: 0px;
  width: 100%;
  position: fixed;
  margin-left: -1px;
  margin-top: -1px;
}

.color_arrow {
  position: relative;
  top: 228px;
  color: #085153;
  left: 93px;
}

.color_arrows {
  position: relative;
  top: 228px;
  color: #085153;
  left: 94% !important;
}

@media only screen and (max-width: 992px) {
  div[type="timeline/slideshow"]>section,
  div[type="timeline"]>section {
    width: 650px;
  }
  .color_arrow {
    left: -18px;
  }
  div[type="slideshow"]>section:not(.hideClass) {
    width: 640px;
    left: 14px;
  }
  .color_arrows {
    left: 99% !important;
  }
}

@media only screen and (max-width: 992px) {
  div[type="slideshow"]>section {
    width: 650px;
  }
  div[type="slideshow"]>section:not(.hideClass) {
    width: 640px;
    left: 18px;
  }
}

@media only screen and (min-width: 1201px) and (max-width: 1299px) {
  div[type="slideshow"]>section:not(.hideClass) {
    width: 845px;
    left: 154px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  div[type="slideshow"]>section:not(.hideClass) {
    width: 698px;
    left: 136px;
  }
}

#slide {
  display: block;
}

.edit_timeline {
  margin: 4%;
}

.containers {
  font-weight: 800;
  font-style: arial;
  font-size: 24px;
  width: 500px;
  height: 100px;
  margin: 2%;
  border: 1px solid grey;
}

#modal_timeline {
  margin-left: 25px;
}

.deleteStyle {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 10px;
  padding-top: 5px;
  float: right;
  right: 12px;
  bottom: 80px;
  color: white;
}

.deleteStyle2 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 10px;
  padding-top: 5px;
  float: right;
  right: 17px;
  bottom: 80px;
  color: white;
}

.deleteStyle3 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 12px;
  padding-top: 5px;
  float: right;
  right: 20px;
  bottom: 80px;
  color: white;
}

.deleteStyle4 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 12px;
  padding-top: 5px;
  float: right;
  right: 24px;
  bottom: 80px;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
  <div type="timeline" id="slide">
    <section>
      <header>Title One</header>
      <article>Content one</article>
    </section>
    <section>
      <header>Title Two</header>
      <article>Content one</article>
    </section>
    <section>
      <header>Title Three</header>
      <article>Content one</article>
    </section>
    <section>
      <header>Title Four</header>
      <article>Content one</article>
    </section>
  </div>

</div>

<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>

【讨论】：

  • 我不明白你的代码 sudhi。我认为你没有明白我的意思。
  • 所以你需要在点击箭头按钮时将前一个框中的内容复制到新的框中
  • 只复制标题和内容还是复制整个div？
  • 你能检查答案中附加的jsfiddle
【解决方案2】：

我对你的脚本做了一些修改来解决这个问题：

Javascript：我只使用了一个事件来确定您何时单击向上或向下，但我必须添加一个带有按钮方向名称的数据属性，以找出哪个按钮使打电话。

 $(document).ready(function () {
            $("#edit_button").click(function () {
                $("#slide").css("display", "none");
            })
            $("#slide section").attr("contenteditable", "true");
            var i = 1;
            $("section").each(function () {
                $(this).attr("id", i);
                $(this).append("<div class='deleteStyle'>" + "&#10006" + "</div>");
                $(this).append("<div class='deleteStyle2'>" + "&#10010" + "</div>");
                $(this).append("<div class='deleteStyle3' data-direction='up'>" + "&#x2191" + "</div>");
                $(this).append("<div class='deleteStyle4'  data-direction='down' >" + "h" + "</div>");
                i++;
            });

            $("#slide").on('click', '.deleteStyle', function () {
                $(this).parent("section").remove()
            });
            $("#slide").on('click', '.deleteStyle2', function () {
                var ele = $(this).closest("section").clone(true);
                $(this).closest("section").after(ele);
            });
            $("#slide").on('click', '.deleteStyle3, .deleteStyle4 ', function (e) {
                var direction = $(e.currentTarget).data().direction,
                    $currentSection = $(this).parent(),
                    $sectionToMove = direction === 'up' ? $(this).parent().prev() : $(this).parent().next(),
                    currentSectionData = $currentSection.html(),
                    sectionToMoveData = $sectionToMove.html();

                $currentSection.html(sectionToMoveData);
                $sectionToMove.html(currentSectionData);
            });
        });
div[type="timeline/slideshow"]>section,
div[type="timeline"]>section {
  margin: auto;
  width: 500px;
  z-index: 100;
  opacity: 1;
  border-left: 4px solid #00BCD4;
  border-top: 1px solid grey;
  min-height: 130px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: relative;
  top: 50px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}


/*div[type="timeline/slideshow"] > section:hover , div[type="timeline"] > section:hover {
	opacity:1;
} 
*/

div[type="timeline/slideshow"]::before,
div[type="timeline"]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: .2rem;
  background: white;
  height: 55px;
}

div[type="timeline/slideshow"]>section::after,
div[type="timeline"]>section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -56px;
  width: .2rem;
  background: grey;
  height: 54px;
}

div[type="timeline/slideshow"]>section>header,
div[type="timeline"]>section>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(16px, 23px);
  font-size: 30px;
  font-family: arial;
  padding: 3px;
  position: relative;
  word-wrap: break-word;
  line-height: 31px;
}

div[type="timeline/slideshow"]>section>article,
div[type="timeline"]>section>article {
  transform: translate(12px, 14px);
  color: black;
  font-size: 20px;
  font-family: arial;
  position: relative;
  padding: 9px;
  word-wrap: break-word;
  line-height: 31px;
}

div[type="timeline"]>section:last-of-type::after {
  display: none;
}

div[type="slideshow"] {
  height: 471px;
  position: relative;
  top: 100px;
}

div[type="slideshow"]>section:not(.hideClass) {
  margin: auto;
  width: 900px;
  max-height: 265px;
  z-index: 100;
  border-top: 1px solid grey;
  border-left: 4px solid #00BCD4;
  min-height: 250px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: absolute;
  overflow-x: hidden;
  top: 21.4%;
  left: 168px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}

div[type="slideshow"]>section:not(.hideClass)>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(93px, 32px);
  font-size: 34px;
  font-family: arial;
  position: relative;
  word-wrap: break-word;
}

div[type="slideshow"]>section:not(.hideClass)>article {
  transform: translate(87px, 39px);
  max-width: 800px;
  color: black;
  font-size: 22px;
  font-family: arial;
  position: relative;
  padding: 10px;
  word-wrap: break-word;
}


/*.activeClass{    
	opacity: 1 !important;
}
*/

.hideClass {
  opacity: 0;
  min-height: 0 !important;
  margin: 0 !important;
}

.hideClass header,
.hideClass article {
  display: none;
}

@keyframes fadein {
  0% {
    opacity: 0
  }
  50% {
    opacity: 0.5
  }
  100% {
    opacity: 1
  }
}

div[type="timeline"] br {
  display: none;
}

.progressClass {
  height: 4px;
  display: none;
  top: 46px;
  left: 0px;
  width: 100%;
  position: fixed;
  margin-left: -1px;
  margin-top: -1px;
}

.color_arrow {
  position: relative;
  top: 228px;
  color: #085153;
  left: 93px;
}

.color_arrows {
  position: relative;
  top: 228px;
  color: #085153;
  left: 94% !important;
}

@media only screen and (max-width: 992px) {
  div[type="timeline/slideshow"]>section,
  div[type="timeline"]>section {
    width: 650px;
  }
  .color_arrow {
    left: -18px;
  }
  div[type="slideshow"]>section:not(.hideClass) {
    width: 640px;
    left: 14px;
  }
  .color_arrows {
    left: 99% !important;
  }
}

@media only screen and (max-width: 992px) {
  div[type="slideshow"]>section {
    width: 650px;
  }
  div[type="slideshow"]>section:not(.hideClass) {
    width: 640px;
    left: 18px;
  }
}

@media only screen and (min-width: 1201px) and (max-width: 1299px) {
  div[type="slideshow"]>section:not(.hideClass) {
    width: 845px;
    left: 154px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  div[type="slideshow"]>section:not(.hideClass) {
    width: 698px;
    left: 136px;
  }
}

#slide {
  display: block;
}

.edit_timeline {
  margin: 4%;
}

.containers {
  font-weight: 800;
  font-style: arial;
  font-size: 24px;
  width: 500px;
  height: 100px;
  margin: 2%;
  border: 1px solid grey;
}

#modal_timeline {
  margin-left: 25px;
}

.deleteStyle {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 10px;
  padding-top: 5px;
  float: right;
  right: 12px;
  bottom: 80px;
  color: white;
}

.deleteStyle2 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 10px;
  padding-top: 5px;
  float: right;
  right: 17px;
  bottom: 80px;
  color: white;
}

.deleteStyle3 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 12px;
  padding-top: 5px;
  float: right;
  right: 20px;
  bottom: 80px;
  color: white;
}

.deleteStyle4 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: cadetblue;
  padding-left: 12px;
  padding-top: 5px;
  float: right;
  right: 24px;
  bottom: 80px;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containers">Click on Edit Timeline button to see the Timeline.</div>
<div class="demo">
  <div type="timeline" id="slide">
    <section>
      <header>Title One</header>
      <article>Content one</article>
    </section>
    <section>
      <header>Title Two</header>
      <article>Content one</article>
    </section>
    <section>
      <header>Title Three</header>
      <article>Content one</article>
    </section>
    <section>
      <header>Title Four</header>
      <article>Content one</article>
    </section>
  </div>

</div>

<button type="button" class="btn btn-success" id="modal_timeline" data-toggle="modal" data-target="#myModal">Edit Timeline</button>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-05-14
    • 1970-01-01
    • 2020-03-07
    • 2017-04-04
    • 1970-01-01
    • 1970-01-01
    • 2020-04-06
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode