Форум

Moloch · #1 (**permalink**) 03.04.2015, 23:10

Здравствуйте? подскажите пожалуйста почему при клике на ссылку первый раз после загрузки страницы не вызывается функция обработчик события после завершения саой toggle? проще говоря почему с первого раза не меняется тип иконки?

ul class="list-group submenu">
                  <li class="list-group-item ">Lorem ipsum
                      <a href="#" class="toggle-sub-menu" > <i class="glyphicon glyphicon-plus-sign "></i></a>
                        <ul class="my-submenu" id="sub1" >
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                        </ul>
                                           
                  </li>
                  <li class="list-group-item"><a href="/donec/">Donec tincidunt laoreet</a></li>
                  <li class="list-group-item"><a href="/vestibulum/">Vestibulum elit</a></li>
                  <li class="list-group-item"><a href="/etiam/">Etiam pharetra</a></li>
                  <li class="list-group-item"><a href="/phasellus/">Phasellus placerat</a></li>
                  <li class="list-group-item"><a href="/cras/">Cras et nisi vitae odio</a></li>
                  <li class="list-group-item ">Lorem ipsum
                      <a href="#" class="toggle-sub-menu" > <i class="glyphicon glyphicon-plus-sign pull-right"></i></a>
                        <ul class="my-submenu" id="sub2">
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                        </ul>
                                           
                  </li>
              </ul>

<script>
$(document).ready(function(){
    $(".toggle-sub-menu").click(function(){
          var cont = '#'+$(this).next().attr("id");
         
        $(cont).slideToggle("slow",function() {
          
          var className = $(cont).prev().children('i').attr("class");
          if (className=='glyphicon glyphicon-plus-sign') {
              className ='glyphicon glyphicon-minus-sign'
          }
          else {
              className='glyphicon glyphicon-plus-sign'
          }
          $(cont).prev().children('i').attr("class",className);
        });
    });
});
</script>

рони · #2 (**permalink**) 03.04.2015, 23:16

Moloch,
потому что условие составлено неверно -- такие сравнения делаются не через == а через !=
потому что находится на самом деле неизвестно пока туда не прописали скриптом.

if (className != 'glyphicon glyphicon-minus-sign') {
              className ='glyphicon glyphicon-minus-sign'
          }

Moloch · #3 (**permalink**) 03.04.2015, 23:19

спасибо, буду знать!

рони · #4 (**permalink**) 03.04.2015, 23:34

Moloch,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .glyphicon-plus-sign::after  {
     content: '+'

  }
  .glyphicon-minus-sign::after  {
     content: '-'

  }
   .toggle-sub-menu {
     text-decoration: none
   }
  .toggle-sub-menu + ul{
    display: none;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script>
$(function(){
    $(".toggle-sub-menu").click(function(){
          var cont = $(this).next();
          var i = $('i' , this)
        cont.slideToggle("slow",function() {
        i.toggleClass('glyphicon-plus-sign glyphicon-minus-sign')
        });
    });
});
</script>

</head>

<body>
<ul class="list-group submenu">
                  <li class="list-group-item ">Lorem ipsum
                      <a href="#" class="toggle-sub-menu" > <i class="glyphicon glyphicon-plus-sign "></i></a>
                        <ul class="my-submenu" id="sub1" >
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                        </ul>

                  </li>
                  <li class="list-group-item"><a href="/donec/">Donec tincidunt laoreet</a></li>
                  <li class="list-group-item"><a href="/vestibulum/">Vestibulum elit</a></li>
                  <li class="list-group-item"><a href="/etiam/">Etiam pharetra</a></li>
                  <li class="list-group-item"><a href="/phasellus/">Phasellus placerat</a></li>
                  <li class="list-group-item"><a href="/cras/">Cras et nisi vitae odio</a></li>
                  <li class="list-group-item ">Lorem ipsum
                      <a href="#" class="toggle-sub-menu" > <i class="glyphicon glyphicon-plus-sign pull-right"></i></a>
                        <ul class="my-submenu" id="sub2">
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                          <li><a href="">proof1</a></li>
                        </ul>

                  </li>
              </ul>


</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript