Форум

Иззет · #1 (**permalink**) 25.12.2013, 13:08

Здравствуйте, столкнулся с проблемой замены toggle(). Как я знаю, данный метод в последних версиях jquery работает иначе, нашёл такую альтернативу :

var flag = new Boolean(true);//Создаем логическую переменную (со значением true)
$('.table').hide(); 

$('h3').click(function() {

  if (flag) {//Если flag == true
    flag = false;//Меняем значение переменной flag
    func1.call(this);//Вызываем func1 с контекстом этой функции (т.е. в вызванной функции this = this этой функции)
  } else {//Если flag не равно true
    flag = true;
    func2.call(this);
  }
  return false;
});
 

function func1() {$('.table').slideDown(500);};
function func2() {$('.table').slideUp(500);};

<h3>Заголовок</h3>
<div class="table">Контент</div>
<h3>Заголовок</h3>
<div class="table">Контент</div>

Корень проблемы - переменная flag будет менять значение true/false вне зависимости по какому именно h3 мы кликаем, можно конечно для каждого заголовка прописать свою переменную, но получится довольно большой код, нет ли более изящного решения ?

danik.js · #2 (**permalink**) 25.12.2013, 13:37

как насчет slideToggle()?

рони · #3 (**permalink**) 25.12.2013, 14:12

Иззет,
если очень хочется plugin toggle for jquery или почему неработает toggle

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .table{
      display: none;
    }
    h3{
      cursor: pointer;
    }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<h3>Заголовок</h3>
<div class="table">Контент</div>
<h3>Заголовок</h3>
<div class="table">Контент</div>
<script>
$.fn.oldtoggle = function () {
    var b = arguments;
    return this.each(function (i, el) {
        a = function () {
            var c = 0;
            return function () {
                b[c++ % b.length].apply(el, arguments)
            }
        }();
        $(el).click(a)
    })
};
function func1() {
var $next = $(this).next('.table')
$('.table:visible').not($next).prev().click();
$next.slideDown(500)};
function func2() {$(this).next('.table').slideUp(500)};
$('h3').oldtoggle(func1, func2);
</script>
</body>
</html>

Иззет · #4 (**permalink**) 25.12.2013, 14:23

danik.js,Спасибо, очень полезный метод. Вопрос - нужно давать класс заголовку, когда блок под ним развернут и убирать класс, когда блок сворачивается, как это реализовывается в данном случае ?

animhotep · #5 (**permalink**) 25.12.2013, 14:50

)) http://api.jquery.com/toggleClass/

Иззет · #6 (**permalink**) 25.12.2013, 14:58

рони,
Большое спасибо, работает, можете, если не трудно, комментариями объяснить как ваша функция работает? я не совсем разобрался с её принципом работы. Ещё одна проблема - нужно чтобы в данный момент только один блок был бы виден, т.е. чтобы при разворачивании одного блока, другие бы все скрывались. $('.table').hide() в func1 не решает дело

danik.js · #7 (**permalink**) 25.12.2013, 15:16

Аналог на stackoverflow, с небольшим отличием, нормальным предложенным именем, необфусцированными переменными:
http://stackoverflow.com/a/14478259

рони, извини, минус поставить не могу - скажи спасибо глючному движку.

рони · #8 (**permalink**) 25.12.2013, 15:19

Сообщение от Иззет

при разворачивании одного блока, другие бы все скрывались.

добавлено в func1 -- для такой логики toggle ненужен ...

Сообщение от Иззет

если не трудно, комментариями

трудно - список функций выполняется по кругу на элементе и в контексте этого элемента на событие клик этого элемента

рони · #9 (**permalink**) 25.12.2013, 15:25

Иззет,
Вариант без toggle ...

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .table{
      display: none;
    }
    h3{
      cursor: pointer;
    }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<h3>Заголовок</h3>
<div class="table">Контент</div>
<h3>Заголовок</h3>
<div class="table">Контент</div>
<script>
var $table = $('.table');
$('h3').click(function ()
{
   var $next = $(this).next('.table');
   $table.not($next).slideUp(500);
   $next.slideToggle(500)
});
</script>
</body>
</html>

Иззет · #10 (**permalink**) 25.12.2013, 15:55

рони,
Спасибо за помощь

Форум

Справочник

Discord чат

Курсы javascript