Создание сложного меню с анимацией slide с помощью Jquery

222

26 декабря 2017, 15:01

Есть сложное меню с двумя подкатегориями. Однако анимация срабатывает некорректно при клике на вторую подкатегорию (заново начинается анимация второй подкатегории, и только потом переходит на третью подкатегорию).
По-моему, этот баг из-за этой строчки кода, однако без нее при повторном нажатии не срабатывает анимация. Есть ли другой выход из этой ситуации, или же другой метод РЕШЕНИЯ этой задачи?

$('.category li').children('.r_div').animate({ 
    width: '0%'     
  },0);

$('.category li').click(function(event) { 
  $('.category li').children('.r_div').css('display', 'none'); 
  $(this).children('.r_div').css('display', 'block'); 
  $('.category li').children('.r_div').animate({ 
    width: '0%'     
  },0); 
  $(this).children('.r_div').animate({ 
    width: '100%'     
  },300); 
}); 
$('.cat_2 li').click(function(event) { 
  $('.cat_2 li').children('.cat_3').css('display', 'none'); 
  $(this).children('.cat_3').css('display', 'block'); 
   
  $(this).children('.cat_3').animate({ 
    width: '100%'     
  },300); 
});

ul { 
  list-style: none; 
  width: 20%; 
  position: relative; 
  padding:0; 
} 
 
.category li { 
  padding: 5px 0; 
  background: #eee; 
  cursor:pointer; 
  border-bottom: 1px solid #fff; 
} 
.category ul{ 
  width:100%; 
} 
 
.r_div , .cat_3{ 
  display: none; 
  position: absolute; 
  top: 0; 
  width:0%; 
  background: #eee; 
  left:100%; 
  border-left:3px solid #000; 
  padding:0 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="category"> 
  <li> 
    Menu #1 
    <div class="r_div"> 
      <ul class="cat_2"> 
        <li>Test 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
        <li>Test 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
        <li>Test 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
        <li>Test 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
        <li>Test 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
      </ul> 
 
    </div> 
  </li> 
  <li> 
    Menu #2 
    <div class="r_div"> 
      <ul> 
        <li>Test2</li> 
        <li>Test2</li> 
        <li>Test2</li> 
        <li>Test2</li> 
        <li>Test2</li> 
      </ul> 
 
    </div> 
  </li> 
  <li> 
    Menu #3 
    <div class="r_div"> 
      <ul> 
        <li>Test3</li> 
        <li>Test3</li> 
        <li>Test3</li> 
        <li>Test3</li> 
        <li>Test3</li> 
      </ul> 
 
    </div> 
  </li> 
  <li> 
    Menu #4 
    <div class="r_div"> 
      <ul> 
        <li>Test4</li> 
        <li>Test4</li> 
        <li>Test4</li> 
        <li>Test4</li> 
        <li>Test4</li> 
      </ul> 
 
    </div> 
  </li> 
  <li> 
    Menu #5 
    <div class="r_div"> 
      <ul class="cat_2"> 
        <li>Test5 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
        <li>Test5</li> 
         
        <li>Test5</li> 
        <li>Test5</li> 
        <li>Test5</li> 
      </ul> 
 
    </div> 
  </li> 
</ul>

Answer 1

клик по cat_2 > li после исполнения вызывает всплытие события (bubbling), в результате click по .category > li снова выполняетcя. Заглушить всплытие можно функцией event.stopPropagation();

$('.category > li').click(function(event) { 
 
    //console.log("$('.category > li').click()"); 
 
    $('.category > li > .r_div').css('display', 'none'); 
    $(this).children('.r_div').css('display', 'block'); 
     
    $('.category > li > .r_div').animate({ 
        width: '0%'     
    },0); 
     
    $(this).children('.r_div').animate({ 
        width: '100%'     
    },300); 
}); 
 
$('.cat_2 > li').click(function(event) { 
 
    //console.log("$('.cat_2 > li').click()"); 
 
    $('.cat_2 > li > .cat_3').css('display', 'none'); 
    $(this).children('.cat_3').css('display', 'block'); 
     
    $(this).children('.cat_3').animate({ 
        width: '100%'     
    },300); 
     
    event.stopPropagation(); // стопэ 
     
});

ul { 
  list-style: none; 
  width: 20%; 
  position: relative; 
  padding:0; 
} 
 
.category li { 
  padding: 5px 0; 
  background: #eee; 
  cursor:pointer; 
  border-bottom: 1px solid #fff; 
} 
.category ul{ 
  width:100%; 
} 
 
.r_div , .cat_3{ 
  display: none; 
  position: absolute; 
  top: 0; 
  width:0%; 
  background: #eee; 
  left:100%; 
  border-left:3px solid #000; 
  padding:0 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="category"> 
  <li> 
    Menu #1 
    <div class="r_div"> 
      <ul class="cat_2"> 
        <li>Test 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
        <li>Test 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
        <li>Test 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
        <li>Test 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
        <li>Test 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
      </ul> 
 
    </div> 
  </li> 
  <li> 
    Menu #2 
    <div class="r_div"> 
      <ul> 
        <li>Test2</li> 
        <li>Test2</li> 
        <li>Test2</li> 
        <li>Test2</li> 
        <li>Test2</li> 
      </ul> 
 
    </div> 
  </li> 
  <li> 
    Menu #3 
    <div class="r_div"> 
      <ul> 
        <li>Test3</li> 
        <li>Test3</li> 
        <li>Test3</li> 
        <li>Test3</li> 
        <li>Test3</li> 
      </ul> 
 
    </div> 
  </li> 
  <li> 
    Menu #4 
    <div class="r_div"> 
      <ul> 
        <li>Test4</li> 
        <li>Test4</li> 
        <li>Test4</li> 
        <li>Test4</li> 
        <li>Test4</li> 
      </ul> 
 
    </div> 
  </li> 
  <li> 
    Menu #5 
    <div class="r_div"> 
      <ul class="cat_2"> 
        <li>Test5 
          <ul class="cat_3"> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
            <li>submenu</li> 
          </ul> 
        </li> 
        <li>Test5</li> 
         
        <li>Test5</li> 
        <li>Test5</li> 
        <li>Test5</li> 
      </ul> 
 
    </div> 
  </li> 
</ul>

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Какова роль description в messages.json?

Возьмем код для примера отсюда:

239

CSS

QSS и SVG. Почему не отображаются тени?

Суть проблемы: Есть SVG-картинки с тенями, которые я навешиваю на виджеты посредством Style SheetsПри отрисовке у картинок почему-то не отображаются...

309

MySQL

FLOT+MYSQL как показать нули?

Если нужно пустые недели , взятые из базы(по которым нет записей в базе и нет их самих по конкретной записи) показать на графике с нулевыми...

244

MySQL

MySQL GROUP BY и итоговая разница значений

Доброго дня! В таблице среди прочих имеется поле "rank" (int)И нужно в GROUP BY вывести разницу между первым "rank" в таблице и последним

229