用于更改引导程序图像的下拉菜单

Question

我正在使用手风琴引导程序

我想在菜单弹出时更改图像，如图片 我该怎么做？

Pic Before menu pops up

Pic After menu pops up

这是我的代码：

 <div class="bs-example" style="font-family:'B Nazanin'">
<div class="panel-group" id="accordion">
<?php foreach ($this->items as $i => $item) : ?>
        <div class="panel panel-default">
        <div class="panel-heading" style="background-color:#c4c3c0">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $i; ?>"
                 style="text-decoration:none;">


         <img id ="mi" src="components/com_joomfaq/pic/iconmenu.png">

    <?php echo  $item->question;?>  
    </a>
            </h4>
        </div>
        <div id="collapse<?php echo $i; ?>" class="panel-collapse collapse">
            <article class="panel-body" style="background-color:#efeeee; text-align:justify">        


    <?php echo $item->answer; ?>        
     </article>
        </div>
    </div>
<?php endforeach; ?>

 </div>

Answer 1

您可以通过 jQuery 在您的菜单切换中为图像切换一个类，然后检查该类是否在之前切换过（toggleClass() 在第一次单击时添加一个类，如果您第二次单击则将其删除）。 在您的 HTML 中，您只需向切换元素 (<a>) 添加一个类。我用menu-toggle。

这里有一个sn-p给你演示一下效果

$('.menu-toggle').click(function() {
  $('#mi').toggleClass('toggled');
  if ($('#mi').hasClass('toggled')) {
    $('#mi').attr('src', 'http://files.softicons.com/download/animal-icons/cat-force-icons-by-iconka/ico/cat_sing.ico');
  } else {
    $('#mi').attr('src', 'http://icons.iconarchive.com/icons/iconka/meow/256/cat-walk-icon.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class="menu-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $i; ?>" style="text-decoration:none;">
  <img id="mi" src="http://icons.iconarchive.com/icons/iconka/meow/256/cat-walk-icon.png" />
</a>