Prevent rotate the icon when load the page

I want to Prevent rotate the <i> when loading the page. It should rotate only when clicking the menu title. I can fix this issue by adding the content in CSS. But the rotate process not works. How can I fix the issue?

{{#each menu}}     <ul id="myUL">       <div class="menu-text">         <li>           <span class="caret treeparent ripple">Data<i class="fas fa-chevron-down arrow"></i></span>             <ul class="nested nav nav-pills flex-column tog">               {{#each this}}               <li data-rel="data-rel" class="nav-item">                 <a href="/page">Data</a>               </li>               {{/each}}             </ul>           </li>         </div>       </ul>     {{/each}} 

JS:

var openedTreeLiIndex = JSON.parse(localStorage.getItem('openedTreeLiIndex')) || [];     restoreOpenedTreeIndex();     $(".treeparent").click(function () {         var $tog = $(this).next('.tog');         $tog.slideToggle();         if ($tog.hasClass('open')){             $tog.removeClass('open');             $(this).removeClass('caret-down');         }else{             $tog.addClass('open');             $(this).addClass('caret-down');         }         $(".arrow", this).toggleClass('flip');         storeOpenTreeIndex();     });      function storeOpenTreeIndex() {         var liItems = $('.menu-text > li');         var counter = liItems.length;         $(liItems).each(function (index, li) {             var nestedUl = $(li).find('ul.open');             if (nestedUl.length > 0) {                 if (openedTreeLiIndex.indexOf(index) === -1) {                     openedTreeLiIndex.push(index);                 }             } else {                 openedTreeLiIndex = openedTreeLiIndex.filter(function (item) { return item !== index; });             }              if (!--counter){                 localStorage.setItem('openedTreeLiIndex', JSON.stringify(openedTreeLiIndex));             }         });     }      function restoreOpenedTreeIndex() {         var liItems = $('.menu-text > li');         var counter = liItems.length;         $(liItems).each(function (index, li) {             if (openedTreeLiIndex.indexOf(index) !== -1) {                 $(li).find('ul').addClass('open').css({ display: 'block' });                 $(li).find('.caret').addClass('caret-down');             }         });     } 

CSS:

ul, #myUL {     list-style-type: none; }    #myUL {     margin: 0;     padding: 0; }    .caret {     cursor: pointer;     -webkit-user-select: none; /* Safari 3.1+ */     -moz-user-select: none; /* Firefox 2+ */     -ms-user-select: none; /* IE 10+ */     user-select: none;     font-size: 17px; }  .caret::before {   font-family: "FontAwesome";   content: "\02C5";   color: black;   display: inline-block;   margin-right: 6px;   float:right; }    .arrow{     margin-right: 9px;     float: right;     vertical-align:middle;     padding: 4px; }    .caret-down::before {     -ms-transform: rotate(180deg); /* IE 9 */     -webkit-transform: rotate(180deg); /* Safari */     transform: rotate(180deg);   }    .nested {     display: none;     margin: 10px; }    .active {     display: block; }  .treeparent {     display: table-cell;     overflow: auto;     max-width: 350px;     max-height: 350px;     margin: auto;     height: 35px;     /* font-family: sans-serif; */     font-size: 12.8px;     color: #007BFF;     margin: 3px;     width: 260px;     vertical-align:middle;     padding: 2px; }  .treeparent:hover {     background-color: #cee0f5;     color: black;     transition: background 0.5s; }  .arrow {     -moz-transition: transform 0.6s;     -webkit-transition: transform 0.6s;     transition: transform 0.6s;   }    .flip {     transform: rotate(-180deg); }  .ripple {     background-position: center;   }  .ripple:hover {     background: #cee0f5 radial-gradient(circle, transparent 5%, #a8cdf7 1%) center/15000%; }  .ripple:active {     background-color: #6eb9f7;     background-size: 100%;     transition: background 0s; } 
Asked on September 1, 2020 in CSS.
Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.