切换材质设计图标

时间：2018-10-02 09:24:44

标签： javascript jquery 

    $.fn.extend({
    treed: function (o) {
      
      var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';

       var openedIconClass = 'keyboard_arrow_down';
      var closedIconClass = 'keyboard_arrow_up';
      
      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };
      
        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            $('.material-icons').css('display', 'block');
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
            branch.addClass('branch');
  
            branch.on('click', function (e) {

                   $('.material-icons').toggleClass("display-block");
                    $(this).toggleClass("orange-light");
                if($(this).hasClass("orange-light")){
                     $(".arrow", this).text('keyboard_arrow_up');
                }
                if (this == e.target) {

                    var icon = $(this).children('i:first');
                    console.log(icon.text);
                    icon.toggleClass(openedClass + " " + closedClass);
                      icon.toggleClass(openedIconClass + " " + closedIconClass);
                    $(this).children().children().toggle();

                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
      tree.find('.branch .indicator').each(function(){
        $(this).on('click', function () {
            $(this).closest('li').click();
        });
      });
        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});

//Initialization of treeviews

$('#tree1').treed();

$('#tree2').treed({openedClass:'glyphicon-folder-open', closedClass:'glyphicon-folder-close'});

$('#tree3').treed({openedClass:'glyphicon-chevron-right', closedClass:'glyphicon-chevron-down'});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!DOCTYPE html>
<html>


    <style type="text/css">
    .tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none
}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-left:.5em
}

.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:18px;
    bottom:16px;
    left:40px;
    border-left:1px solid;
    border-color: #556f7b;
}
.tree li {
    margin:0;
    padding:0 1em;
    line-height:2em;
  
    position:relative;
    font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
}
.tree ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:32px;
    left:40px;
  border-color: #556f7b;
}
.tree ul li:last-child:before {
    background:#fff;
    height:auto;
    top:32px;
    bottom:0
}

.indicator {
    margin-right:5px;
}
.tree li a {
    text-decoration: none;
   font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
}
.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color:#369;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
  
}

.branch{
      
  height: 64px;
  border-radius: 2px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0px 2px 2px 0 rgba(0, 0, 0, 0.15);
  border: solid 1px transparent;
      padding-top: 18px!important;
      cursor: pointer;
}
.indicator{
    color: transparent;
    margin-left: 5px;
    margin-right: 5px;
}
.first-level .branch{
    padding-left: 40px;
    margin-bottom: 6px;
}
 .orange-light{
    background: #fff4e7;
 }
 .display-block{
    display:block!important;
 }
</style>
    <body id="admin-body">
        <div class="row">
            <div class="col-md-2" id="sidebar-content"> 
              
            </div>

            <div class="col-md-10" id="main-content">
                   <ul id="tree2">
                <li><a href="#">Level 

 <i class="material-icons arrow" style="float: right; padding-left: 24px; padding-right: 8px; color: #556f7b;  display: block!important;">
keyboard_arrow_down
</i>

</a>
<a href="">
<i class="material-icons" style="float: right;     padding-left: 28px;color: #f8971c; display: block!important; padding-right: 28px;
    border-right: 1px solid #e8e8e8;">
send
</i>
</a>
<a href="">
 <i class="material-icons" style="float: right; color: #556f7b;     padding-right: 28px;
    border-right: 1px solid #e8e8e8;  display: block!important;">
list
</i>
</a>


            
    
                    <ul class="first-level" style="    margin-top: 22px; margin-left: -15px; margin-right: -15px;">
                       <li>faef 
                            <ul>
                                <li>Reports
                                    <ul>
                                        <li>Report1</li>
                                        <li>Report2</li>
                                        <li>Report3</li>
                                    </ul>
                                </li>
                             
                            </ul>
                        </li>
                        <li>afasf
                            <ul>
                                <li>Reports
                                    <ul>
                                        <li>Report1</li>
                                        <li>Report2</li>
                                        <li>Report3</li>
                                    </ul>
                                </li>
                             
                            </ul>
                        </li>
                       
                    </ul>
             
                   
                    
             
                   </li>
           
            </ul>
            </div>

        </div>
    </body>
</html>

我在这里有此代码，并单击了箭头材料设计图标的一部分以使箭头向上，但是当我再次单击该卡片时，该图标不会切换。有人可以帮我这个吗..？我该如何切换材料设计图标，如果可以的话，您可以在这里帮助我吗？我是编码方面的新手，我在这里尝试一切，但不能正常工作

2 个答案:

答案 0 :(得分：0)

如您所见，您所要做的就是更改元素文本以更改材料设计图标。您可以自由更改它，并且每次都可以使用。

似乎需要将代码拆分为较小的函数，以便您找出错误所在。 

$(window).on('click', function(event) {
  var icon = $('.arrow');
  icon.toggleClass('up');
  if ( icon.hasClass('up') ) {
    icon.text('keyboard_arrow_down');
  } else {
    icon.text('keyboard_arrow_up');
  }
});
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<i class="material-icons arrow up">keyboard_arrow_down
</i>

答案 1 :(得分：0)

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<i id="toggleId" class="material-icons" onclick="toggleMaker()">keyboard_arrow_down</i>

<script>
  function toggleMaker() {
    var toggleElement = document.getElementById("toggleId")
    if(toggleElement.innerHTML === "keyboard_arrow_down") {
      toggleElement.innerHTML = "keyboard_arrow_up";
    }
    else {
      toggleElement.innerHTML = "keyboard_arrow_down";
    }
  }
</script>
相关问题
最新问题