Question

我的问题在我的CSS中，位置：绝对不能在ul.weekdaylist中工作。隐藏的问题出现问题，滑块工作正常，但ul列表无法正常工作..请帮帮我....

 <html>
<head>
<style>

 .assemble_dayssec {
     overflow: hidden;
     width: 300px;
  }
 .assemble_dayswidth {
     left: 0;
      position: relative;
      top: 0;
  }
  .weekdays {
     cursor: pointer;
     float: left;
     margin-left: 1px;
     padding-bottom: 2px;
     position: relative;
     width: 120px;
     border-bottom: 1px solid hsl(0, 0%, 72%);
     margin-left: 10px;
  }
   ul.weekdaylist {
     border: 1px solid hsl(0, 0%, 82%);
     display: none;
     left: 0;
     list-style: outside none none;
     margin: 0;
     padding: 0;
     position: absolute;
     right: 0;
     top: 18px;
     z-index: 10;
   }
    ul.weekdaylist li {
      font-size: 10px;
      list-style: outside none none;
       padding: 3px;
     }
   </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script>
      $(document).ready(function () {
         $('.headtext').click(function()    {
          $(this).next('.weekdaylist').show();
      });

  var totalWidth = 0;
    $(".weekdays").each(function(){
        totalWidth = totalWidth + $(this).outerWidth(true);
    });

    var maxScrollPosition = totalWidth - $(".assemble_dayssec").outerWidth();

    function toGalleryItem($targetItem){
        if($targetItem.length){
            var newPosition = $targetItem.position().left;

            if(newPosition <= maxScrollPosition){

                $targetItem.addClass("weekdays-active");

                $targetItem.siblings().removeClass("weekdays-active");

                $(".assemble_dayswidth").animate({
                    left : - newPosition
                });
            } else {
                $(".assemble_dayswidth").animate({
                    left : - maxScrollPosition
                });
            };
        };
    };

    $(".assemble_dayswidth").width(totalWidth);
    $(".weekdays:first").addClass("weekdays-active");
    $(".weekdays_controls-prev").click(function(){
        var $targetItem = $(".weekdays-active").prev();
        toGalleryItem($targetItem);
    });

    $(".weekdays_controls-next").click(function(){
        var $targetItem = $(".weekdays-active").next();
        toGalleryItem($targetItem);
       });
       }); 
      </script>
       </head>
        <body>
      <a class="weekdays_controls-prev" href="javascript:void(0);">Prev</a>
  <a class="weekdays_controls-next" href="javascript:void(0);">Next</a>
  <div class="assemble_dayssec">
   <div class="assemble_dayswidth">
      <div class="weekdays">
         <a class="headtext" href="javascript:void(0);">Test</a>    
            <ul class="weekdaylist">
              <li><a href="javascript:void(0);">FIRST</a></li>
              <li><a href="javascript:void(0);">SECOND</a></li>
              <li><a href="javascript:void(0);">THIRD</a></li>
             <li><a href="javascript:void(0);">RESET</a></li>
           </ul>
       </div>
      <div class="weekdays">
         <a class="headtext" href="javascript:void(0);">Test</a>    
            <ul class="weekdaylist">
              <li><a href="javascript:void(0);">FIRST</a></li>
              <li><a href="javascript:void(0);">SECOND</a></li>
              <li><a href="javascript:void(0);">THIRD</a></li>
             <li><a href="javascript:void(0);">RESET</a></li>
           </ul>
       </div>
        <div class="weekdays">
         <a class="headtext" href="javascript:void(0);">Test</a>    
            <ul class="weekdaylist">
              <li><a href="javascript:void(0);">FIRST</a></li>
              <li><a href="javascript:void(0);">SECOND</a></li>
              <li><a href="javascript:void(0);">THIRD</a></li>
             <li><a href="javascript:void(0);">RESET</a></li>
           </ul>
       </div>
       <div class="weekdays">
         <a class="headtext" href="javascript:void(0);">Test</a>    
            <ul class="weekdaylist">
              <li><a href="javascript:void(0);">FIRST</a></li>
              <li><a href="javascript:void(0);">SECOND</a></li>
              <li><a href="javascript:void(0);">THIRD</a></li>
             <li><a href="javascript:void(0);">RESET</a></li>
           </ul>
       </div>
      <div class="weekdays">
         <a class="headtext" href="javascript:void(0);">Test</a>    
            <ul class="weekdaylist">
              <li><a href="javascript:void(0);">FIRST</a></li>
              <li><a href="javascript:void(0);">SECOND</a></li>
              <li><a href="javascript:void(0);">THIRD</a></li>
             <li><a href="javascript:void(0);">RESET</a></li>
           </ul>
       </div>
      <div class="weekdays">
         <a class="headtext" href="javascript:void(0);">Test</a>    
            <ul class="weekdaylist">
              <li><a href="javascript:void(0);">FIRST</a></li>
              <li><a href="javascript:void(0);">SECOND</a></li>
              <li><a href="javascript:void(0);">THIRD</a></li>
             <li><a href="javascript:void(0);">RESET</a></li>
           </ul>
       </div>
      </div>
      </div>
     </body>
    </html>

我在ul.weekdaylist中有显示问题，位置：绝对不行，请帮助我......

我的东西assemble_dayssec溢出隐藏是一个问题..但我们必须使用溢出隐藏的滑块..请帮助我

Answer 1

试试这个，在这种情况下你不需要绝对位置它没有它就可以正常工作。

    $(document).ready(function() {
      $('.headtext').click(function() {
        $(this).next('.weekdaylist').show();
      });

      var totalWidth = 0;
      $(".weekdays").each(function() {
        totalWidth = totalWidth + $(this).outerWidth(true);
      });

      var maxScrollPosition = totalWidth - $(".assemble_dayssec").outerWidth();

      function toGalleryItem($targetItem) {
        if ($targetItem.length) {
          var newPosition = $targetItem.position().left;

          if (newPosition <= maxScrollPosition) {

            $targetItem.addClass("weekdays-active");

            $targetItem.siblings().removeClass("weekdays-active");

            $(".assemble_dayswidth").animate({
              left: -newPosition
            });
          } else {
            $(".assemble_dayswidth").animate({
              left: -maxScrollPosition
            });
          };
        };
      };

      $(".assemble_dayswidth").width(totalWidth);
      $(".weekdays:first").addClass("weekdays-active");
      $(".weekdays_controls-prev").click(function() {
        var $targetItem = $(".weekdays-active").prev();
        toGalleryItem($targetItem);
      });

      $(".weekdays_controls-next").click(function() {
        var $targetItem = $(".weekdays-active").next();
        toGalleryItem($targetItem);
      });
    });

 .assemble_dayssec {
   overflow-y: hidden;
   width: 300px;
   overflow-x: visible;
 }
 .assemble_dayswidth {
   left: 0;
   position: relative;
   top: 0;
   float: left;
 }
 .weekdays {
   cursor: pointer;
   float: left;
   margin-left: 1px;
   padding-bottom: 2px;
   position: relative;
   width: 120px;
   border-bottom: 1px solid hsl(0, 0%, 72%);
   margin-left: 10px;
 }
 ul.weekdaylist {
   border: 1px solid hsl(0, 0%, 82%);
   display: none;
   list-style: outside none none;
   margin: 0;
   padding: 0;
   z-index: 10;
 }
 ul.weekdaylist li {
   font-size: 10px;
   list-style: outside none none;
   padding: 3px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="weekdays_controls-prev" href="javascript:void(0);">Prev</a>
<a class="weekdays_controls-next" href="javascript:void(0);">Next</a>
<div class="assemble_dayssec">
  <div class="assemble_dayswidth">
    <div class="weekdays">
      <a class="headtext" href="javascript:void(0);">Test</a> 
      <ul class="weekdaylist">
        <li><a href="javascript:void(0);">FIRST</a>
        </li>
        <li><a href="javascript:void(0);">SECOND</a>
        </li>
        <li><a href="javascript:void(0);">THIRD</a>
        </li>
        <li><a href="javascript:void(0);">RESET</a>
        </li>
      </ul>
    </div>
    <div class="weekdays">
      <a class="headtext" href="javascript:void(0);">Test</a> 
      <ul class="weekdaylist">
        <li><a href="javascript:void(0);">FIRST</a>
        </li>
        <li><a href="javascript:void(0);">SECOND</a>
        </li>
        <li><a href="javascript:void(0);">THIRD</a>
        </li>
        <li><a href="javascript:void(0);">RESET</a>
        </li>
      </ul>
    </div>
    <div class="weekdays">
      <a class="headtext" href="javascript:void(0);">Test</a> 
      <ul class="weekdaylist">
        <li><a href="javascript:void(0);">FIRST</a>
        </li>
        <li><a href="javascript:void(0);">SECOND</a>
        </li>
        <li><a href="javascript:void(0);">THIRD</a>
        </li>
        <li><a href="javascript:void(0);">RESET</a>
        </li>
      </ul>
    </div>
    <div class="weekdays">
      <a class="headtext" href="javascript:void(0);">Test</a> 
      <ul class="weekdaylist">
        <li><a href="javascript:void(0);">FIRST</a>
        </li>
        <li><a href="javascript:void(0);">SECOND</a>
        </li>
        <li><a href="javascript:void(0);">THIRD</a>
        </li>
        <li><a href="javascript:void(0);">RESET</a>
        </li>
      </ul>
    </div>
    <div class="weekdays">
      <a class="headtext" href="javascript:void(0);">Test</a> 
      <ul class="weekdaylist">
        <li><a href="javascript:void(0);">FIRST</a>
        </li>
        <li><a href="javascript:void(0);">SECOND</a>
        </li>
        <li><a href="javascript:void(0);">THIRD</a>
        </li>
        <li><a href="javascript:void(0);">RESET</a>
        </li>
      </ul>
    </div>
    <div class="weekdays">
      <a class="headtext" href="javascript:void(0);">Test</a> 
      <ul class="weekdaylist">
        <li><a href="javascript:void(0);">FIRST</a>
        </li>
        <li><a href="javascript:void(0);">SECOND</a>
        </li>
        <li><a href="javascript:void(0);">THIRD</a>
        </li>
        <li><a href="javascript:void(0);">RESET</a>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS问题：溢出：隐藏子div位置：绝对不工作？

1 个答案: