Форум

villiwalla · #1 (**permalink**) 05.04.2016, 12:01

Добрый день! Могли бы подсказать где была допущена ошибка. В скрипте требуется добить классы определённым объектам если их нету, а если они уже есть то удалить их.

Сам скрипт по добавлению класса работает отлично но не работает на удаление.

function moreItem(butt) {
	
	parent1 = $(butt).parent();
	parent2 = parent1.parent();
	childer = parent1.children();
	childer2 = childer.find('.desc-it');
		
		if(parent2 == '.items.acti' & childer2 == '.desc-it.acti') {
			parent2.removeClass('acti');
			$(childer2).removeClass('acti').animate({height: '0px', opacity: 0}, 1000);
		}
		else if (parent2 != '.items.acti' & childer2 != '.desc-it.acti') {
			parent2.addClass('acti');
			$(childer2).addClass('acti').animate({height: '300px', opacity: 1}, 1000);
		} 
    };

Функция вызывается по клику

<div class="items panel panel-default col-md-3">
    <div class="panel-heading row">title</div>
        <div class="panel-body row">
            <form >
               <div class="desc-it">content</div>
            </form>
             <a class="mr" onclick="moreItem(this);">Все характеристики <br> <i class="fa fa-angle-double-down"></i></a>
    </div>
</div>

Dilettante_Pro · #2 (**permalink**) 05.04.2016, 12:44

villiwalla,
А может, вам подумать над использованием .toggleClass() ?
http://jquery.page2page.ru/index.php...%D1%81%D0% B0

рони · #3 (**permalink**) 05.04.2016, 12:49

Сообщение от villiwalla

if(parent2 == '.items.acti' & childer2 == '.desc-it.acti')

parent2 - обьект и childer2 обьект -- вы их стравниваите со строкой ... и & ... пасьянс а не код

villiwalla · #4 (**permalink**) 06.04.2016, 08:52

Сообщение от Dilettante_Pro

villiwalla,
А может, вам подумать над использованием .toggleClass() ?
http://jquery.page2page.ru/index.php...%D1%81%D0% B0

C toggle не очень понятно как плавно должен блок сворачиваться.

рони · #5 (**permalink**) 06.04.2016, 09:23

villiwalla,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .desc-it  {
       height: 0; opacity: 0;
    }
    .items.acti .panel-heading{
        color: #FF0000;
    }
    .desc-it.acti{
      border: 2px solid #FF00FF;
    }
    .mr{
      cursor: pointer;
    }

</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
$(function() {
    $(".items").each(function(indx, item) {
        $(".mr", item).on("click", function(event) {
            event.preventDefault();
            var op = $(item).toggleClass("acti").is(".acti"),
            content = $(".desc-it", item);
            op = op ? {
                height: content[0].scrollHeight,
                opacity: 1
            } : {
                height: 0,
                opacity: 0
            };
            content.stop().toggleClass("acti").animate(op, 1000)
        })
    })
});
  </script>
</head>

<body>
<div class="items panel panel-default col-md-3">
    <div class="panel-heading row">title</div>
        <div class="panel-body row">
            <form >
               <div class="desc-it">content</div>
            </form>
             <a class="mr" >Все характеристики <br> <i class="fa fa-angle-double-down"></i></a>
    </div>
</div>
<div class="items panel panel-default col-md-3">
    <div class="panel-heading row">title</div>
        <div class="panel-body row">
            <form >
               <div class="desc-it">content<br><br><br><br><br>content</div>
            </form>
             <a class="mr" >Все характеристики <br> <i class="fa fa-angle-double-down"></i></a>
    </div>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript