Question

如果你点击一个div，我想要目标＆＃34;面板＆＃34; to slideToggle（）。如果隐藏了目标面板，我想在一个将它旋转270度的字形上添加一个类。

除了可见的检查失败之外，我已经完成了所有工作。我做错了什么？

＆＃13;

$(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');
  }
});

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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-* attributes一起使用的推荐方法。

另外，.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

HI Bro尝试这个小提琴https://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和Rotate Icon如果可见或隐藏

2 个答案: