Question

到目前为止我有这个代码：

$(document).ready(function(){   
    $('li').each(function() { 
      $(this).on('shown', function () {
         $(this).children().attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");
      });

      $(this).on('hidden', function () {
         $(this).children().attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");;
      });
    });
  });

我试图根据

是否折叠显示向下或向右箭头，现在忽略html中的src。

我不确定为什么我的jQuery不会工作。我搜索所有

标签，然后决定是否显示它们或隐藏，然后编辑子标签的src

感谢您的建议

Answer 1

DEMO：MY FIDDLE

点击时没有得到结果的原因是由于以下问题：

没有任何点击事件绑定到LI。目前您只是在页面加载时加载图像。
您没有指定隐藏或显示哪个元素。通过添加.next()你的'告诉DOM查看LI列表中的下一个元素，并查看它是否隐藏。

我会试试这个：

$(document).ready(function(){  
    function checkOnLoad(elem){
        if(elem.next().css("display") === "none"){
            elem.find('img').attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");
        } else {
            elem.find('img').attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");
        }
    }

    function checkOnClick(li_clicked){
        var id = li_clicked.attr("data-target");
         $(id).on('hidden.bs.collapse', function () {           
             li_clicked.children('img').attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");
        })

         $(id).on('shown.bs.collapse', function () {
           li_clicked.children('img').attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");
        })
    }

    $('li').each(function() { 
        checkOnLoad($(this));
    });

    $('li').click(function() { 
        checkOnClick($(this));
    });
});

Answer 2

您需要收听引导程序的shown.bs.collapse和hidden.bs.collapse事件，而不是仅仅显示＆＃39;并且隐藏了＆＃39;。

试试这样：

$(document).ready(function(){   
    $('li').each(function() {
        var li = $(this);
        li.on('shown.bs.collapse', function () {
           li.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");
        });

        li.on('hidden.bs.collapse', function () {
           li.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");;
        });
    });
});

Answer 3

这有效，但不确定为什么。

$(document).ready(function(){  
    function checkCollapsed(elem){
      if(elem.next().css("display") === "none"){
           elem.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");;
      } else {
           elem.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");
      }
    }

    function checkCollapsed2(elem){
      if(elem.next().css("display") === "none"){
           elem.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/down.jpg");;
      } else {
           elem.children().attr("src", "http://test.cz.vs1056.server4u.cz/images/right.jpg");
      }
    }

    $('li').each(function() { 
          checkCollapsed($(this));
    });

    $('li').click(function() { 
           checkCollapsed2($(this));
    });
});

Bootstrap 3数据切换图标更改

3 个答案: