切换后，滑杆标签和滑杆不同步

时间：2019-05-17 11:28:46

标签： javascript jquery html css

我正在学习Jquery。

我在滑动条上遇到问题。当我点击选项卡以将其打开时，侧边栏选项卡和侧边栏本身不会同步移动。

我要实现的效果是使该选项卡在制作动画时看起来像它附着在Slidetab上。

有人可以帮我吗？

这是指向fiddle

的链接

下面是我的代码段：

$(document).ready(function(){
  $('.slideOutTab').on("click", function(){
    //$("#facetsSlide").toggleClass('show');
    var effect = 'slide';
    var options = {direction: 'right'};
    var duration = 500;

    $("#facetsSlide").toggle(effect, options, duration);
    $('.slideOutTab').toggleClass('showSlideOut');
  });
  
  $('.closebtn').on("click", function(){
    $("#facetsSlide").toggle('show');
    $('.slideOutTab').toggleClass('showSlideOut');
  });
});
#facetsSlide {
  max-width: 300px;
  background: #FFF;
   position: absolute;
right: 0px;
border: #d3d3d3;
border-right: none;
display: none;
}

#facetsSlide.show {
  transform: inherit;
  display: block;
  background: #fff;
}

.closebtn {
  top: 0px;
  font-size: 36px;
  margin-left: 220px;
  color: black;
        }


.showSlideOut {
  right: 300px !important;
  -webkit-transition: all 500ms;
  transition: all 500ms;
}


.slideOutTab {
  cursor: pointer;
  z-index: 1000;
  margin-top: 50px;
  position: absolute;
  /*left: -40px;*/
  right: 0px;
  height: 200px;
  width: 40px;
  /*-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5);*/
  background: #fff;
  border: #d3d3d3;
  border-right: none;
}

.slideOutTab div {
  text-align: center;
  position: relative;
  right: 70px;
  top: 90px;
 color: red;
  width: 180px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  writing-mode: lr-tb;
}



@media (min-width: 768px) {
  #facetsSlide {
    padding-top: 20px;
    margin-top: 20px;
    width: 300px;
    background: #fff;
    position: absolute;
    right: 0px;
    display: block; }
    #facetsSlide .slideOutTab {
      position: absolute; } }

@media (max-width: 1199.98px) {
  #facetsSlide {
    display: none;
    /*  transform: translateX(-100%);*/ } }

@media (min-width: 992px) {
  .content {
    margin-left: 200px;
    margin-right: 200px; }
  #facetsSlide {
    border: none; }
  .slideOutTab {
    display: none; }
  .closebtn {
    display: none; } }

@media (min-width: 1200px) {
  #facetsSlide {
    border: none; }
  .content {
    margin-left: 200px;
    margin-right: 200px; } }

@media (min-width: 1999px) {
  #facetsSlide {
    margin-right: 22vw; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <script
        src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
        integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
        crossorigin="anonymous"></script>
      <title>Tímarit</title>
   </head>
   <body>
   <div class="col-md-3 " id="facetsSlide">
            <a href="#" class="closebtn">&times;</a>
            <article class="card-group-item">
               <header class="card-header">
                  <h6 class="title">TExt</h6>
               </header>
               <div class="filter-content">
                  <div class="card-body">
                     <ul>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                     </ul>
                  
                  </div>
                  <!-- card-body.// -->
               </div>
            </article>
            <!-- card-group-item.// -->
            <article class="card-group-item">
               <header class="card-header">
                  <h6 class="title">text sector</h6>
               </header>
               <div class="filter-content">
                  <div class="card-body">
                     <ul>
                        <li>more txt</li>
                        <li>more txt</li>
                        <li>more txt</li>
                        <li>more txt</li>
                        <li>more txt</li>
                     </ul>
                  </div>
                  <!-- card-body.// -->
               </div>
            </article>
            <!-- card-group-item.// -->
         </div>
         <div class="slideOutTab">
            <div>
               <p>open sidebar</p>
            </div>
         </div>
         
            </body>
</html>

1 个答案:

答案 0 :(得分：1)

您需要对.slideOutTab部分进行转换

.slideOutTab {
    cursor: pointer;
    z-index: 1000;
    margin-top: 50px;
    position: absolute;
    /*left: -40px;*/
    right: 0px;
    height: 200px;
    width: 40px;
    /*-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .5);*/
    background: #fff;
    border: #d3d3d3;
    border-right: none;
    transition: 0.5s;
}


$(document).ready(function(){
  $('.slideOutTab').on("click", function(){
    //$("#facetsSlide").toggleClass('show');
    var effect = 'slide';
    var options = {direction: 'right'};
    var duration = 500;

    $("#facetsSlide").toggle(effect, options, duration);
    $('.slideOutTab').toggleClass('showSlideOut');
  });
  
  $('.closebtn').on("click", function(){
    $("#facetsSlide").toggle('show');
    $('.slideOutTab').toggleClass('showSlideOut');
  });
});
#facetsSlide {
	max-width: 300px;
	background: #FFF;
	position: absolute;
	right: 0px;
	border: #d3d3d3;
	border-right: none;
	display: none;
}

#facetsSlide.show {
	transform: inherit;
	display: block;
	background: #fff;
}

.closebtn {
	top: 0px;
	font-size: 36px;
	margin-left: 220px;
	color: black;
}

.showSlideOut {
	right: 300px !important;
	-webkit-transition: all 500ms;
	transition: all 500ms;
}

.slideOutTab {
	cursor: pointer;
	z-index: 1000;
	margin-top: 50px;
	position: absolute;
	/*left: -40px;*/
	right: 0px;
	height: 200px;
	width: 40px;
	/*-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .5);*/
	background: #fff;
	border: #d3d3d3;
	border-right: none;
    transition: 0.5s;
}

.slideOutTab div {
	text-align: center;
	position: relative;
	right: 70px;
	top: 90px;
	color: red;
	width: 180px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	writing-mode: lr-tb;
}

@media (min-width: 768px) {
	#facetsSlide {
		padding-top: 20px;
		margin-top: 20px;
		width: 300px;
		background: #fff;
		position: absolute;
		right: 0px;
		display: block;
	}
	#facetsSlide .slideOutTab {
		position: absolute;
	}
}

@media (max-width: 1199.98px) {
	#facetsSlide {
		display: none;
		/*  transform: translateX(-100%);*/
	}
}

@media (min-width: 992px) {
	.content {
		margin-left: 200px;
		margin-right: 200px;
	}
	#facetsSlide {
		border: none;
	}
	.slideOutTab {
		display: none;
	}
	.closebtn {
		display: none;
	}
}

@media (min-width: 1200px) {
	#facetsSlide {
		border: none;
	}
	.content {
		margin-left: 200px;
		margin-right: 200px;
	}
}

@media (min-width: 1999px) {
	#facetsSlide {
		margin-right: 22vw;
	}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <script
        src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
        integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
        crossorigin="anonymous"></script>
      <title>Tímarit</title>
   </head>
   <body>
   <div class="col-md-3 " id="facetsSlide">
            <a href="#" class="closebtn">&times;</a>
            <article class="card-group-item">
               <header class="card-header">
                  <h6 class="title">TExt</h6>
               </header>
               <div class="filter-content">
                  <div class="card-body">
                     <ul>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                     </ul>
                  
                  </div>
                  <!-- card-body.// -->
               </div>
            </article>
            <!-- card-group-item.// -->
            <article class="card-group-item">
               <header class="card-header">
                  <h6 class="title">text sector</h6>
               </header>
               <div class="filter-content">
                  <div class="card-body">
                     <ul>
                        <li>more txt</li>
                        <li>more txt</li>
                        <li>more txt</li>
                        <li>more txt</li>
                        <li>more txt</li>
                     </ul>
                  </div>
                  <!-- card-body.// -->
               </div>
            </article>
            <!-- card-group-item.// -->
         </div>
         <div class="slideOutTab">
            <div>
               <p>open sidebar</p>
            </div>
         </div>
         
            </body>
</html>

相关问题
最新问题