Question

所以我编写了一个带有选项的简单菜单，当点击类设置轮时，我使用类settingsin定位div并继续使用toggleClass来提供类设置，执行此操作.settingsin应向左移动150px（左：-150px）有一个很好的滑动过渡。

目前由于某种原因，toggleClass不起作用，div不会向左移动而留下.postit容器而我看不清楚原因，这是一个相当简单的代码。

这是：

$('.settingswheel').click(function(){
	 var t = $('.settingsin');
	 t.toggleClass('settingsout');
 });

.postit {
  position:absolute; 
  overflow:hidden;
  left:1070px; 
  top:-155px; 
  padding-left:10px;
  line-height: 1;   
  width: 275px;    
  margin: 0px;    
  min-height:250px;
  max-height:250px;
  padding-top:35px; 
  border:1px solid #E8E8E8;  
  border-top:60px solid #fdfd86;
  font-family:'Reenie Beanie';    
  font-size:22px;      
  border-bottom-right-radius: 60px 5px;
  display:inline-block;    
  background: #ffff88; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
  background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
 
.postit:after {     
   content: "";
  position:absolute; 
  z-index:-1;
  right:-0px; bottom:20px;
  width:200px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
 -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
      -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
     -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
         transform: matrix(-1, -0.1, 0, 1, 0, 0);
}



.settingswheel{
	position:absolute; 
	bottom:22px; 
	right:15px; 
	cursor:pointer;
	z-index:10001;
}


.settingsin{z-index:2; width:190px; height:150px; background-color:rgb(255, 255, 136); outline:1px solid red; position:absolute; left:15px; }

.settingsout{z-index:2; width:190px; height:150px; background-color:rgb(255, 255, 136); outline:1px solid red; position:absolute; left:30px; transition: all 1.0s ease; }

.menu{
	list-style:none; 
	bottom:8px; 
	position:absolute; 
	font-family: 'Covered By Your Grace', cursive; 
	font-weight:300; 
	width:200px;
	z-index:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="postit">
  <img class="settingswheel testRotate" src="https://cdn.pixabay.com/photo/2016/10/19/03/59/socialmedia-1752079_1280.png">
  <div class="settingsin" style="z-index:2; width:190px; height:150px; background-color:rgb(255, 255, 136); outline:1px solid red; position:absolute; left:5px;" ><span style="font-size:60px; font-family: 'Covered By Your Grace', cursive; position:absolute; left:15px; bottom:15px;">Ajustes</span></div>
  <ul class="menu" >
    <li style="font-size:22px;">Pantalla completa:  <span id="fullscreentoggler" style="cursor:pointer;" value="F" onclick="toggleFullScreen()">si</span></li>
	<li style="font-size:22px; margin-top:8px;">Idioma:  <span id="languagetoggler" style="cursor:pointer;" onclick="toggleLanguage()" >español</span></li>
	<li style="font-size:22px; margin-top:8px;">Diapositivas:  <span class="resta" style="cursor:pointer;"> </span><span class="segundos">3s</span><span class="suma" style="cursor:pointer;"> ></span></li>
  </ul>
</div>

Answer 1

删除元素标记上的style属性。

<div class="settingsin">...

此外，请确保在加载页面后执行click事件。

我的div不会向左移动toggleClass（）

1 个答案: