Форум

Argeares · #1 (**permalink**) 18.01.2017, 21:44

$(document).ready(function() {
    window.onload= function() {
        document.getElementById('toggler').onclick = function() {
            openbox('box', this);
            return false;
        };
    };
    function openbox(id, toggler) {
        var div = document.getElementById(id);
        if(div.style.display == 'block') {
            div.style.display = 'none';
        }
        else {
            div.style.display = 'block';
        }
    }
});

<a id="toggler" href="#">Открыть</a>
<div id="box" style="display: none;">Отображаемый блок</div>

как сделать что бы примерная конструкция работала для многих элементов на странице?, а не только для одного

рони · #2 (**permalink**) 18.01.2017, 21:49

Argeares,
форум-поиск-открывашка

Argeares · #3 (**permalink**) 18.01.2017, 22:19

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

рони · #4 (**permalink**) 18.01.2017, 22:24

Argeares,
id уникально!!! нужны классы

Argeares · #5 (**permalink**) 18.01.2017, 22:37

когда делаю классы не работает.
покажите пожалуйста.
я то понимаю, что такие как я вас уже достали.)

рони · #6 (**permalink**) 18.01.2017, 22:44

Argeares,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      .box {
  height: 300px;color:#fff;
  width: 200px;
  background: black;
  display: none;
}
.toggler {
  background: red;
}


  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.toggler').click(function(event) {
     event.preventDefault()
    var i = $('.toggler').index(this)
    $('.box').eq(i).stop().slideToggle();

});
});  </script>
</head>

<body>
 <a class="toggler" href="#">Открыть</a>
 <div class="box" >Отображаемый блок</div>
 <br>

  <a class="toggler" href="#">Открыть</a>
 <div class="box" >Отображаемый блок</div> <br>
<a class="card__whoop toggler" href="#">Открыть</a>
                            <div class="whoop_pop box">
                                <form>
                                    <p>Сообщить об ошибке</p>
                                    <a href="#">Неправильно указана начальная цена</a>
                                    <a href="#">Цена не обновляется у товара</a>
                                    <a href="#">Неправильно указан товар</a>
                                    <a href="#">Другая причина (написать причину)</a>
                                    <textarea></textarea>
                                    <button>Отправить</button>
                                </form>
                            </div>

</body>
</html>

Argeares · #7 (**permalink**) 18.01.2017, 22:54

что то не работает у меня. смотрите мой код.

$(document).ready(function() {
    $(function() {
        $('.toggler').click(function(event) {
           event.preventDefault()
           var i = $('.toggler').index(this)
           $('.box').eq(i).stop().slideToggle();
       });
    });
});

<a class="card__whoop toggler" href="#"></a>
                            <div class="whoop_pop box">
                                <form>
                                    <p>Сообщить об ошибке</p>
                                    <a href="#">Неправильно указана начальная цена</a>
                                    <a href="#">Цена не обновляется у товара</a>
                                    <a href="#">Неправильно указан товар</a>
                                    <a href="#">Другая причина (написать причину)</a>
                                    <textarea></textarea>
                                    <button>Отправить</button>
                                </form>
                            </div>

в css дисплей ноне стоит.
и оно как бы всплывает но почему то невидимое.

рони · #8 (**permalink**) 18.01.2017, 22:57

Argeares,
смотрите пост№6 добавил ваш код

рони · #9 (**permalink**) 18.01.2017, 23:01

Argeares,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      .box {
  display: none;
}
.toggler {
  background: red;
}

.box.open{
  display:  block;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.toggler').click(function(event) {
     event.preventDefault()
    var i = $('.toggler').index(this)
    $('.box').eq(i).toggleClass('open');

});
});  </script>
</head>

<body>
 <a class="toggler" href="#">Открыть</a>
 <div class="box" >Отображаемый блок</div>
 <br>

  <a class="toggler" href="#">Открыть</a>
 <div class="box" >Отображаемый блок</div> <br>
<a class="card__whoop toggler" href="#">Открыть</a>
                            <div class="whoop_pop box">
                                <form>
                                    <p>Сообщить об ошибке</p>
                                    <a href="#">Неправильно указана начальная цена</a>
                                    <a href="#">Цена не обновляется у товара</a>
                                    <a href="#">Неправильно указан товар</a>
                                    <a href="#">Другая причина (написать причину)</a>
                                    <textarea></textarea>
                                    <button>Отправить</button>
                                </form>
                            </div>

</body>
</html>

Argeares · #10 (**permalink**) 18.01.2017, 23:04

спасибо) разобрался. класс бокс просто уже использовался в коде.

Форум

Справочник

Discord чат

Курсы javascript