Question

我试图在展开时添加向下箭头图像，在未展开时向右箭头图像添加，这与下面的代码一样正常。

问题是当你再次折叠块时它不会删除向下箭头图像。当它崩溃时，我想要用右箭头图像替换向下箭头。

感谢

            $('#title h4').removeClass('DownArrow ');
            $('#title h4').addClass('RightArrow '); 
            $('#title').click(function() {
              $('#d-form').slideToggle("slow");
              $('#title h4').addClass('DownArrow ');            
            });


<div id="title"> <h4><a href="#">Dental</a></h4></div>
<div id="d-form">
some stuff
</div>

Answer 1

您应该使用.toggleClass() ^（DOCS）：

$('#title h4').removeClass('DownArrow ');
$('#title h4').addClass('RightArrow ');
$('#title').click(function(e) {
    e.preventDefault();
    $('#d-form').slideToggle("slow");

    $('#title h4').toggleClass('RightArrow');
    $('#title h4').toggleClass('DownArrow');
});

我还在点击事件中添加了preventDefault()，以便哈希不会加载到href中。

See example →

Answer 2

改为使用toggleClass

          $('#title h4').toggleClass('DownArrow');
          $('#title h4').toggleClass('RightArrow');

工作jsFiddle

jquery用箭头切换问题

2 个答案: