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。

这是一个演示效果的片段

＆＃13;

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

＆＃13;

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

＆＃13;

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

Pic After menu pops up

1 个答案: