Переключить значки материального дизайна

    $.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.info(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>

У меня есть этот код и часть значка дизайна материала стрелки, который мне удалось щелкнуть, чтобы сделать стрелку вверх, но затем, когда я снова щелкаю карточку, значок не переключается. может кто-нибудь помочь мне с этим, пожалуйста ..? как я могу переключать значки материального дизайна, есть ли способ, если да, то можете ли вы мне здесь помочь? Я новичок в кодировании, и я пробую все здесь, но это просто не сработает

javascript jquery

02.10.2018 11:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 658

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Как видите, все, что вам нужно, это изменить текст элемента, чтобы изменить значок материального дизайна. Вы можете свободно менять его, и он работает каждый раз.

Похоже, ваш код нужно разделить на более мелкие функции, чтобы вы могли выяснить, в чем ошибка.

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

02.10.2018 15:56

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

Добавьте объяснение с ответом о том, как этот ответ помогает OP в устранении текущей проблемы

— 26.07.2019 17:12

Pode ser feito sem jquery.

— 26.07.2019 18:15

26.07.2019 16:55