Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.01.2017, 21:44
Интересующийся
Отправить личное сообщение для Argeares Посмотреть профиль Найти все сообщения от Argeares
 
Регистрация: 05.01.2017
Сообщений: 19

Нужна помощь с несложным скриптом.
$(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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Argeares,
форум-поиск-открывашка
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2017, 22:19
Интересующийся
Отправить личное сообщение для Argeares Посмотреть профиль Найти все сообщения от Argeares
 
Регистрация: 05.01.2017
Сообщений: 19

помогите именно с таким примером, был бы очень признателен.
пробую много открывашек. и ни одна не подходит. эта подходит, только она для одного елемента, а нужно для многих.
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2017, 22:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Argeares,
id уникально!!! нужны классы
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2017, 22:37
Интересующийся
Отправить личное сообщение для Argeares Посмотреть профиль Найти все сообщения от Argeares
 
Регистрация: 05.01.2017
Сообщений: 19

когда делаю классы не работает.
покажите пожалуйста.
я то понимаю, что такие как я вас уже достали.)
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2017, 22:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 18.01.2017 в 22:57.
Ответить с цитированием
  #7 (permalink)  
Старый 18.01.2017, 22:54
Интересующийся
Отправить личное сообщение для Argeares Посмотреть профиль Найти все сообщения от Argeares
 
Регистрация: 05.01.2017
Сообщений: 19

что то не работает у меня. смотрите мой код.
$(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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Argeares,
смотрите пост№6 добавил ваш код
Ответить с цитированием
  #9 (permalink)  
Старый 18.01.2017, 23:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #10 (permalink)  
Старый 18.01.2017, 23:04
Интересующийся
Отправить личное сообщение для Argeares Посмотреть профиль Найти все сообщения от Argeares
 
Регистрация: 05.01.2017
Сообщений: 19

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Верстка, нужна помощь со скриптом Quark_ (X)HTML/CSS 1 20.11.2015 13:47
Нужна помощь с скриптом) alex1petrash Общие вопросы Javascript 0 10.03.2015 20:28
Нужна помощь по javascript darklend Общие вопросы Javascript 0 12.01.2014 23:33
Нужна помощь по слайдеру seoguru Работа 3 28.01.2013 22:02
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17