slideToggle Div 和旋转图标（如果可见或隐藏）

Question

如果您单击 div，我希望目标 "panel" 到 slideToggle()。如果目标面板被隐藏，我想添加一个 class 到一个将旋转 270 度的字形。

除了对可见性的检查失败外，我的一切正常。我做错了什么？

$(document).delegate(".showhide", "click", function(e) {
  var panel = $(this).attr('panel');
  $("#" + panel).slideToggle();
  var icon = $(this).attr('icon');

  if ($("#" + panel).is(":visible")) {
    $("#" + icon).removeClass('gly-rotate-270');
  } else {
    $("#" + icon).addClass('gly-rotate-270');
  }
});

.gly-rotate-270 {
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showhide" panel="panelskills" icon="skillsicon">
  <span class="glyphicon glyphicon-circle-arrow-down" id="skillsicon"></span> Skill Level
</div>

<div id="panelskills">
  Some content in here...
</div>

Here's the fiddle

感谢您的帮助。

Answer 1

更新

修剪了 HTML
图标旋转使用toggleClass('glyphicon-circle-arrow-down glyphicon-circle-arrow-right');
将panel和icon改为data-panel和data-icon
将.attr()更改为.data()。

panel 和 icon 不是属性。 data-panel 和 data-icon 是有效的，值是字符串，这正是您所需要的。 .data() 是与 data-* 属性一起使用的推荐方法.

此外 .delegate() 已弃用，请改用 .on()。

片段

$('.showhide').on("click", function(e) {
  var panel = $(this).data('panel');
  console.log(panel);
  var icon = $(this).data('icon');
  console.log(icon);

  $("#" + panel).slideToggle();
  $("#" + icon).toggleClass('glyphicon-circle-arrow-down glyphicon-circle-arrow-right');

});

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="glyphicon glyphicon-circle-arrow-down" id="skillsicon"></span>  <a href='#/' class="showhide" data-panel="panelskills" data-icon="skillsicon">Skill Level</a>


<div id="panelskills">
  Some content in here...
</div>

Answer 2

嗨兄弟试试这个fiddlehttps://jsfiddle.net/pvc3s0ug/11/

像这样改变你的js

    $(document).ready(function() {    
    $(document).delegate(".showhide", "click", function(e) {

      var panel = $(this).attr('panel');

      $("#" + panel).slideToggle();

      var icon = $(this).attr('icon');
     $("#"+ icon).toggleClass('gly-rotate-270');

    });
 });

slideToggle Div 和旋转图标（如果可见或隐藏）

slideToggle Div and Rotate Icon if visible or hidden

css

jquery

slidetoggle

twitter-bootstrap