Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.04.2016, 12:01
Аватар для villiwalla
Интересующийся
Отправить личное сообщение для villiwalla Посмотреть профиль Найти все сообщения от villiwalla
 
Регистрация: 16.02.2016
Сообщений: 29

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

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

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>
Ответить с цитированием
  #2 (permalink)  
Старый 05.04.2016, 12:44
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

villiwalla,
А может, вам подумать над использованием .toggleClass() ?
http://jquery.page2page.ru/index.php...%D1%81%D0% B0
Ответить с цитированием
  #3 (permalink)  
Старый 05.04.2016, 12:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,791

Сообщение от villiwalla
if(parent2 == '.items.acti' & childer2 == '.desc-it.acti')
parent2 - обьект и childer2 обьект -- вы их стравниваите со строкой ... и & ... пасьянс а не код
Ответить с цитированием
  #4 (permalink)  
Старый 06.04.2016, 08:52
Аватар для villiwalla
Интересующийся
Отправить личное сообщение для villiwalla Посмотреть профиль Найти все сообщения от villiwalla
 
Регистрация: 16.02.2016
Сообщений: 29

Сообщение от Dilettante_Pro Посмотреть сообщение
villiwalla,
А может, вам подумать над использованием .toggleClass() ?
http://jquery.page2page.ru/index.php...%D1%81%D0% B0
C toggle не очень понятно как плавно должен блок сворачиваться.
Ответить с цитированием
  #5 (permalink)  
Старый 06.04.2016, 09:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,791

Открывашка 255 спойлер открытие на высоту содержимого
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>

Последний раз редактировалось рони, 06.04.2016 в 09:58.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Повторный вызов функции rvsbox Общие вопросы Javascript 7 09.10.2015 10:59
Вызов функции страницы из расширения chrome nontxt Events/DOM/Window 0 09.02.2015 09:42
Вызов функции из функции с параметрами cript Events/DOM/Window 13 18.01.2015 13:57
Повторный вызов функции TorchTT Общие вопросы Javascript 4 20.03.2014 19:20
Повторный вызов функции LCH Элементы интерфейса 3 01.10.2012 18:19