使用jquery在手风琴上切换图标_Jquery

使用jquery在手风琴上切换图标

jquery

使用jquery在手风琴上切换图标,jquery,Jquery,我用html css和jQuery构建了一个手风琴。除了显示选项卡是打开还是关闭的图标之外，它工作得很好。这是我的 jQuery代码如下所示： $('ul#accordion > li > a').click(function(e){ var $this = $(this), accordionSpan = $('#accordion > li > a span'); if ($this.attr('class'

我用html css和jQuery构建了一个手风琴。除了显示选项卡是打开还是关闭的图标之外，它工作得很好。这是我的

jQuery代码如下所示：

$('ul#accordion > li > a').click(function(e){
        var $this = $(this),
            accordionSpan = $('#accordion > li > a span');

         if ($this.attr('class') != 'active'){
            accordionSpan.removeClass();
            accordionSpan.addClass('icon-arrow-up-6');
            $('#accordion li ul').slideUp(200);
            $this.next().slideDown(200);
            $('#accordion li a').removeClass('active');
            $this.addClass('active');
            $this.children().addClass('icon-arrow-down-7');
         } else {
            $this.next().slideToggle(200);
            if($this.children().hasClass('icon-arrow-down-7')) {
                $this.children().removeClass('icon-arrow-down-7').addClass('icon-arrow-up-6');
            } else {
                $this.children().removeClass('icon-arrow-up-6').addClass('icon-arrow-down-7');
            }
         }
         e.preventDefault();
    });

我需要图标在关闭时为“+”，在打开时为“-”。

试试这个

$('ul#accordion > li > a').click(function(e){
    var $this = $(this),
        accordionSpan = $('#accordion > li > a span');
      $this.addClass('active'); /// you miss this line
     if ($this.attr('class') != 'active'){
        accordionSpan.removeClass();
        accordionSpan.addClass('icon-arrow-up-6');
        $('#accordion li ul').slideUp(200);
        $this.next().slideDown(200);
        $('#accordion li a').removeClass('active');
        $this.addClass('active');
        $this.children().addClass('icon-arrow-down-7');
     } else {
        $this.next().slideToggle(200);
        if($this.children().hasClass('icon-arrow-down-7')) {
            $this.children().removeClass('icon-arrow-down-7').addClass('icon-arrow-up-6');
        } else {
            $this.children().removeClass('icon-arrow-up-6').addClass('icon-arrow-down-7');
        }
     }
     e.preventDefault();
});

最佳方式：例如，将类添加到两个图像中

$(document).ready(function(){
  $("button").click(function(){
    $(".one").toggle();
  });
});
</script>
</head>
<body>


<img class="one" src="">+</img>
<img class="one" src="" style="display:none">-</img>
<button>Toggle between hide() and show()</button>

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“.one”）.toggle（）；
});
});
+
-
在隐藏（）和显示（）之间切换

现在显示：无到“-”图像，即“-”图像将首先隐藏，单击后“-”图像将显示在“+”图像的位置

您可以使用标签来代替它，它会起作用，谢谢。现在，我需要它一次只打开一个选项卡，例如，单击的选项卡打开，其余的关闭。我注意到，在您的方法中有两件事，collapse类做了什么？内容区域取决于高度吗？它不取决于高度看这个你可以忍受折叠类的工作