Question

为移动导航创建了一个基于手风琴的下拉菜单。

当用户点击＆＃34; li＆＃34;它必须添加类＆＃34;活跃＆＃34;标记。这很好用。
此外，它必须将图标更改为＆＃34; white＆＃34;相反＆＃34;灰色＆＃34; - ＆GT;不工作。
当用户点击已存在的＆＃34;有效＆＃34;或其他＆＃34; li＆＃34;，图标必须更改为＆＃34;灰色＆＃34;而不是＆＃34;白色＆＃34; - ＆GT;不工作。

下面是我用来解决问题的代码..但是，我无法找出解决方案。请让任何人帮助我。

由于

HTML：

<ul class="menu-accordion">
      <li>
      <a href="#"><img class="nav--icon" data-alt-src="images/nav-01_white.svg" src="images/nav-01_grey.svg" />Link 1<span></span></a>
      </li>
      <li>
      <a href="#"><img class="nav--icon" data-alt-src="images/nav-02_white.svg" src="images/nav-02_grey.svg" />Link 2<span></span></a>
      </li>
      <li>
      <a href="#"><img class="nav--icon" data-alt-src="images/nav-03_white.svg" src="images/nav-03_grey.svg" />Link 3<span></span></a>
      </li>
</ul>

JS：

$('.menu-accordion li a').click(function(){
    var $this = $(this),
        newSource = $(this).find('li a.active img.nav--icon').data('alt-src');
    $('.menu-accordion li a.active').removeClass('active');
    $(this).closest('li a').addClass('active');
    $(this).data('alt-src', $(this).attr('src'));
    $(this).attr('src', newSource);
});

Answer 1

JavaScript：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
 $(document).ready(function(){

    $('.menu-accordion li a img:eq(1)').addClass('active');
    nimg = $('.menu-accordion li a img:eq(1)').attr("data-alt");
    oimg = $('.menu-accordion li a img:eq(1)').attr("src");
    $('.menu-accordion li a img:eq(1)').attr("src",nimg).attr("data-alt",oimg); 

    $('.menu-accordion li a').click(function(){

        $('.menu-accordion li').each(function(){
            if($(this).find("a img").hasClass("active") == true){
                $(this).find("a img").removeClass("active");
                oldimg = $(this).find("a img").attr("data-alt");
                newimg = $(this).find("a img").attr("src");
                $(this).find("a img").attr("src",oldimg).attr("data-alt",newimg);
            }
        });

        imgEle = $(this).find("img");
        newimg = imgEle.attr("data-alt")
        oldimg = imgEle.attr("src");
        imgEle.attr("src",newimg);
        imgEle.attr("data-alt",oldimg);
        imgEle.addClass("active");
    });
})
</script>

HTML：

<ul class="menu-accordion">
<li>
    <a href="#"><img class="nav--icon" data-alt="g.png" src="w.png" />Link 1<span></span></a>
</li>
<li>
    <a href="#"><img class="nav--icon" data-alt="g.png" src="w.png" />Link 2<span></span></a>
</li>
<li>
    <a href="#"><img class="nav--icon" data-alt="g.png" src="w.png" />Link 3<span></span></a>
</li>

我已将data-alt-src更改为data-alt
$。每个用于删除当前活动类和交换图像。

手风琴菜单 - 图标从src交换到data-src

1 个答案: