Updated fiddle

Question

我有一个按钮，当用户将鼠标悬停在按钮上时会附加一个箭头。单击时，内容div将使用jQuery.slideToggle()在其包装中滑出。

一旦div滑出，我想让按钮中的箭头旋转180度，表示按下它会使内容div在再次单击时降低。

我做了一个JsFiddle来展示我到目前为止所拥有的东西：https://jsfiddle.net/414mwv17/

单击按钮后箭头指向下方的最佳方法是什么？

Answer 1

已经开始为你建立。看看这个，让我知道你的反馈。谢谢！

添加了以下样式：

#makeGroupButton span.open:after {
  border: 3px solid #FFF;
  border-top: none;
  border-right: none;
  margin-top: -15px;
}

和一些js：

$('#makeGroupButton').bind('click', function(event) {
  event.preventDefault();
  $('#slideout').slideToggle(500);
  $(this).find('span').toggleClass('open');
});

#wrapper{
  height: 500px;
  width: 300px;
  position:relative;
  border: 2px solid blue;
}

#slideout {
  height: 95%;
  width: 95%;
  border: 2px solid red;
  position: absolute;
  bottom: 0;
  left: 2.5%;
}

#makeGroupButton
{
  clear: both;
  text-align: center;
  color: white;
  width: 220px;
  background:black;
  overflow: hidden;
  transition: all 0.5s;
}

#makeGroupButton:hover, #makeGroupButton:active 
{
  text-decoration: none;
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}

#makeGroupButton span 
{
  display: inline-block;
  position: relative;
  padding-right: 0;
  transition: padding-right 0.5s;
}

#makeGroupButton span:after 
{
  content: '';  
  position: absolute;
  top: 0;
  right: -20px;
  opacity: 0;
  width: 15px;
  height: 15px;
  margin-top: -5px;
  background: rgba(0, 0, 0, 0);
  border: 3px solid #FFF;
  border-bottom: none;
  border-left: none;
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(-45deg);
}

#makeGroupButton:hover span, #makeGroupButton:active span 
{
  padding-right: 30px;
}

#makeGroupButton:hover span:after, #makeGroupButton:active span:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  opacity: 1;
  border-color: white;
  right: 0;
  top: 50%;
}

#makeGroupButton span.open:after {
  border: 3px solid #FFF;
  border-top: none;
  border-right: none;
  margin-top: -15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="slideout" style="display: none;"></div>
</div>
<a href="#" id="makeGroupButton">
  <span>New Group</span>
</a>

Answer 2

为您希望克拉显示的方式创建一个新类：

#makeGroupButton span.rotate:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(135deg);
}

请注意选择器中的类添加。

然后将javascript / jQuery更改为只切换该类：

 $('#makeGroupButton').bind('click', function(){
     $('#slideout').slideToggle(500);
     $(this).children('span').toggleClass('rotate');
  });

你不能直接用jQuery选择:after和:before伪选择器，所以只需更改类，添加CSS通常是最简单的方法。

Updated fiddle

Answer 3

我会在点击时添加一个旋转类，然后应用以下css：

#makeGroupButton.rotate span:after  {
    top: 0px;
    -webkit-transform: rotate(-228deg) !important;
}

我已更新你的js小提琴https://jsfiddle.net/414mwv17/2/。

更清洁的方法是使用箭头图标，然后将该图标旋转180度。

希望这有帮助

菜单滑出后，按下按钮指向箭头

3 个答案:

Updated fiddle