【问题标题】:Drop-down menu to change the image of the bootstrap用于更改引导程序图像的下拉菜单
【发布时间】:2015-01-10 07:20:51
【问题描述】:

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

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

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>

【问题讨论】:

    标签: twitter-bootstrap menu accordion


    【解决方案1】:

    您可以通过 jQuery 在您的菜单切换中为图像切换一个类,然后检查该类是否在之前切换过(toggleClass() 在第一次单击时添加一个类,如果您第二次单击则将其删除)。 在您的 HTML 中,您只需向切换元素 (&lt;a&gt;) 添加一个类。我用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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-02-08
      • 2021-07-22
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多