如何在同一位置设置不同的div？

问题描述 投票：0回答：1

我正在建立水平时间表。单击点，箭头，它们都运行良好。

我的问题是：我希望明细框始终位于相同的位置和大小。如果我使用固定的位置，则几乎不可能使其响应，因为该框位于屏幕的同一点。您在这里有什么解决方案吗？

$('.point-text').on('click',function(){
      $('.point-details, .point-arrow, .point-arrow-shade').css('display', 'none');
      if ($(this).siblings('.point-details').css('display') == 'none'){
          console.log("auf");
         $(this).siblings('.point-details').css('display', 'block');
         $(this).siblings('.point-arrow').css('display', 'block');
         $(this).siblings('.point-arrow-shade').css('display', 'block');
      }
    });
    
    $('.point-text').first().click();
.h-timeline-container{
       min-height:300px;
         margin-top:70px;
    }
    
    ol.h-timeline-wrap {
    	position: relative;
        margin: 0;
        justify-content: space-around;
        display: flex;
        height: 1px;
        background: #d4d4d4;
    }
    
    ol.h-timeline-wrap::before {
    	left: -5px;
    }
    ol.h-timeline-wrap::after {
    	right: -10px;
    	border: 10px solid transparent;
    	border-right: 0;
    	border-left: 20px solid #9b2;
        border-radius: 3px;
    }
    
    /* ---- Timeline elements ---- */
    
    li.h-timeline-point {
        position: relative;
        top: -10px;
        display: block;
        float: left;
        width: 150px;
        font: bold 14px arial;
    }
    li.h-timeline-point::before {
        content: "";
        position: relative;
        top: -10px;
        left: -4px;
        display: block;
        width: 40px;
        height: 40px;
        z-index: 0;
        border: 4px solid #009FDA;
        border-radius: 50%;
        background: #009FDA;
    }
    .point-text {
        right: -11px;
        z-index: 2;
        font-size: 25px;
        top: -48px;
        position: relative;
        font-weight: normal;
        color: white;
    }
    
    /* ---- Details ---- */
    
    .point-details {
        display:none;
        position: relative;
        right: 50px;
        top: -11px;
        padding: 16px;
        border-radius: 3px;
        border: 1px solid #002776;
        font-size: 16px;
        background: #fff;
        color: black;
        font-weight: normal;
        width: 950px;
    }
    
    
    /* ---- Hover effects ---- */
    
    .point-text:hover .h-timeline-point {	
      color: #28e;
    }
    .point-text:hover{
      cursor: pointer;
      }
    .point-arrow {
        content: "";
        position: absolute;
        left: 0px;
        top: 46px;
        display: none;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #002776;
    }
    .point-arrow-shade{
        display: block;
        top: 48px;
        border-bottom: 20px solid #ffffff;
        position: absolute;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        width: 0;
        height: 0;
        left: 0px;
        content: "";
        z-index: 2;
    }
    .h-timeline-point:hover::before {
    	background-color: #002776;
    	border-color: #002776;
    }
    
    @media only screen and (max-width: 1200px) {
        .point-details {
            width:800px;
        }
      li.h-timeline-point {
        width:100px;
      }
    }
    @media only screen and (max-width: 800px) {
      li.h-timeline-point {
      width:75px;
      }
       .point-details {
            width:700px;
        }
    }
    @media only screen and (max-width: 500px) {
     li.h-timeline-point {
      width:25px;
      }
       .point-details {
            width:400px;
        }
    }
    @media only screen and (max-width: 450px) {
    
       .point-details {
            width:350px;
        }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="h-timeline-container">
    <ol class="h-timeline-wrap">
    	<li class="h-timeline-point"><span class="point-text">1</span><span class="point-arrow-shade">&nbsp;</span> <span class="point-arrow">&nbsp;</span> <span class="point-details">1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
    	<li class="h-timeline-point"><span class="point-text">2</span><span class="point-arrow-shade">&nbsp;</span> <span class="point-arrow">&nbsp;</span> <span class="point-details">2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
    	<li class="h-timeline-point"><span class="point-text">3</span><span class="point-arrow-shade">&nbsp;</span> <span class="point-arrow">&nbsp;</span> <span class="point-details">3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
    	<li class="h-timeline-point"><span class="point-text">4</span><span class="point-arrow-shade">&nbsp;</span> <span class="point-arrow">&nbsp;</span> <span class="point-details">4 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
    	<li class="h-timeline-point"><span class="point-text">5</span><span class="point-arrow-shade">&nbsp;</span> <span class="point-arrow">&nbsp;</span> <span class="point-details">5 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
    </ol>
html css position
1个回答
1
投票

[不确定这是否可以解决您的问题，但您只能创建一个详细信息框，然后使用数字按钮中的一些javascript和onclick事件，更改详细信息框的内容。 

var content1 = "1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
var content2 = "2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
var content3 = "3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
var content4 = "4 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
var content5 = "5 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."


$('.point-text').on('click', function() {
  $('.point-arrow, .point-arrow-shade').css('display', 'none');
  if ($(this).siblings('.point-arrow').css('display') == 'none') {
    console.log("auf");
    $(this).siblings('.point-details').css('display', 'block');
    var selector = $(this).text();
    var binder = "content" + selector;
    $('.point-details').text(eval(binder));
    $(this).siblings('.point-arrow').css('display', 'block');
    $(this).siblings('.point-arrow-shade').css('display', 'block');
  }
});

$('.point-text').first().click();
.h-timeline-container {
   min-height: 300px;
   margin-top: 70px;
 }

 ol.h-timeline-wrap {
   position: relative;
   margin: 0;
   justify-content: space-around;
   display: flex;
   height: 1px;
   background: #d4d4d4;
 }

 ol.h-timeline-wrap::before {
   left: -5px;
 }

 ol.h-timeline-wrap::after {
   right: -10px;
   border: 10px solid transparent;
   border-right: 0;
   border-left: 20px solid #9b2;
   border-radius: 3px;
 }

 /* ---- Timeline elements ---- */

 li.h-timeline-point {
   position: relative;
   top: -10px;
   display: block;
   float: left;
   width: 150px;
   font: bold 14px arial;
 }

 li.h-timeline-point::before {
   content: "";
   position: relative;
   top: -10px;
   left: -4px;
   display: block;
   width: 40px;
   height: 40px;
   z-index: 0;
   border: 4px solid #009FDA;
   border-radius: 50%;
   background: #009FDA;
 }

 .point-text {
   right: -11px;
   z-index: 2;
   font-size: 25px;
   top: -48px;
   position: relative;
   font-weight: normal;
   color: white;
 }

 /* ---- Details ---- */

 .point-details {
   /* display: none; */
   position: relative;
   right: 50px;
   top: -11px;
   padding: 16px;
   border-radius: 3px;
   border: 1px solid #002776;
   font-size: 16px;
   background: #fff;
   color: black;
   font-weight: normal;
   width: 950px;
 }


 /* ---- Hover effects ---- */

 .point-text:hover .h-timeline-point {
   color: #28e;
 }

 .point-text:hover {
   cursor: pointer;
 }

 .point-arrow {
   content: "";
   position: absolute;
   left: 0px;
   top: 46px;
   display: none;
   width: 0;
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 20px solid #002776;
 }

 .point-arrow-shade {
   display: block;
   top: 48px;
   border-bottom: 20px solid #ffffff;
   position: absolute;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   width: 0;
   height: 0;
   left: 0px;
   content: "";
   z-index: 2;
 }

 .h-timeline-point:hover::before {
   background-color: #002776;
   border-color: #002776;
 }

 @media only screen and (max-width: 1200px) {
   .point-details {
     width: 800px;
   }

   li.h-timeline-point {
     width: 100px;
   }
 }

 @media only screen and (max-width: 800px) {
   li.h-timeline-point {
     width: 75px;
   }

   .point-details {
     width: 700px;
   }
 }

 @media only screen and (max-width: 500px) {
   li.h-timeline-point {
     width: 25px;
   }

   .point-details {
     width: 400px;
   }
 }

 @media only screen and (max-width: 450px) {

   .point-details {
     width: 350px;
   }
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="h-timeline-container">
  <ol class="h-timeline-wrap">
    <li class="h-timeline-point">
      <span class="point-text">1</span>
      <span class="point-arrow-shade">&nbsp;</span>
      <span class="point-arrow">&nbsp;</span>
      <span class="point-details">1</span>
    </li>
    <li class="h-timeline-point">
      <span class="point-text">2</span>
      <span class="point-arrow-shade">&nbsp;</span>
      <span class="point-arrow">&nbsp;</span>
    </li>
    <li class="h-timeline-point">
      <span class="point-text">3</span>
      <span class="point-arrow-shade">&nbsp;</span>
      <span class="point-arrow">&nbsp;</span>
    </li>
    <li class="h-timeline-point">
      <span class="point-text">4</span>
      <span class="point-arrow-shade">&nbsp;</span>
      <span class="point-arrow">&nbsp;</span>
    </li>
    <li class="h-timeline-point">
      <span class="point-text">5</span>
      <span class="point-arrow-shade">&nbsp;</span>
      <span class="point-arrow">&nbsp;</span>
    </li>
  </ol>
</div>

这里是小提琴：https://jsfiddle.net/7dyn2cpb/3/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.