Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 04.12.2013, 15:10
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Poznakomlus
return target.tagName == 'A';
А как же кнопки, селекты, чекбоксы и тд и тп. Ты все это собрался перечислить? Ну удачи
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #12 (permalink)  
Старый 04.12.2013, 22:48
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Сообщение от danik.js Посмотреть сообщение
Ты все это собрался перечислить
Да нет. Я за спичками то зашел, а то в каждом посте все новые задачи. Может они и не нужны были Т.С.
<head>
    <style>
      .float {
        height: 20px;
        background: yellow;
      }
      .size {
        height:100px
      }
    </style>
  </head>
  <body>
    <a href="http://mail.ru">Mail.ru</a>
    <div class="float"></div>
    <script>
      (function () {
        var element = document.querySelector('.float');
        document.onclick = function (event) {
          event = event || window.event;
          var target = event.target || event.srcElement;
          if (target.tagName == "DIV" && (target.className == 'float' || target.className == 'float size')) {
            element.className = 'float' + (target.className == 'float' ? ' size' : '');
            return false;
          }
          if (element.className == 'float size') {
            element.className = 'float';
          }

        }
      })();
    </script>
  </body>

http://learn.javascript.ru/play/FaPQPb

Последний раз редактировалось Vlasenko Fedor, 04.12.2013 в 22:50.
Ответить с цитированием
  #13 (permalink)  
Старый 05.12.2013, 01:20
Новичок на форуме
Отправить личное сообщение для Derekovich Посмотреть профиль Найти все сообщения от Derekovich
 
Регистрация: 04.12.2013
Сообщений: 8

$('.float').click(function() {
$('.float').toggleClass('size');
});

$(document).click(function(event){
if($(event.target).hasClass('float') return;
if(!$(event.target).hasClass('size') && $('.float').hasClass('size')){
$('.float').toggleClass('size');
}
});

Вообще пробую так как написал выше. Делаю проверку, если клик на элементе, то возврат. Если клик вне элемента и элемент имеет класс size то тогда убирать класс у него. На одном элементе работает такая схема, а когда элементов несколько то беда... Задача была у меня следующая: есть 4 картинки с описанием каждой, при клике на картинку необходимо увеличивать ее размер и показывать описание, мой способ работает если документ один, когда элементов несколько не хочет, плывет css весь( и вообще похоже это все на говнокод) я слабоват еще)
Ответить с цитированием
  #14 (permalink)  
Старый 05.12.2013, 01:40
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Мой вариант, переписанный с использованием jQuery и слегка измененный.
<style>
.float{height: 20px;background: yellow;margin-bottom:10px;}
.size{height:100px}
</style>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function(){

var $target = null;
var skipClick = false;

var onDocumentClick = function() {
    $target.removeClass('size');
    $target = null;
    return false;
};
var onElementClick = function() {
    if (!skipClick) {
        setTimeout(function(){
            $(document).one('click', onDocumentClick);
        });
        skipClick = true;
        $target = $(this);
        $target.addClass('size');
        return false;
    }
    skipClick = false;
};

$('.float').click(onElementClick);

})();
</script>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #15 (permalink)  
Старый 05.12.2013, 02:05
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<!DOCTYPE HTML>
  <head>
    <style>
      .float {
        height: 80px;
        background: yellow;
        width:120px;
        margin: 5px;
        float: left;
      }
      .size {
        height:160px
      }
    </style>
  </head>
  
  <body>
    <div class="float">
      <div>Test</div>
    </div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <script>
      (function () {
        document.onclick = function (event) {
          event = event || window.event;
          var target = event.target || event.srcElement,
            active = this.querySelector('.size'),
            elCls;
          while (target != this) {
            elCls = target.className;
            elCls == 'float' && (target.className += ' size') ||
            elCls == 'float size' && (target.className = 'float');
            target = target.parentNode;
          }
          active && (active.className = 'float');
        }
      }());
    </script>
  </body>

http://learn.javascript.ru/play/YGn0Sb
А код то становится все короче

Последний раз редактировалось Vlasenko Fedor, 05.12.2013 в 20:43.
Ответить с цитированием
  #16 (permalink)  
Старый 05.12.2013, 02:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

Derekovich, при клике по элементу чередование открытия закрытия - вне элемента все закрываются
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
.float{height: 20px;background: yellow;margin-bottom:10px;}
.size{height:100px}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

</script>
</head>

<body>

<div class="float"></div>
<div class="float"></div>
<div class="float"></div>

<script>
$('.float').click(function(event) {
event.stopPropagation();
$(this).toggleClass('size');
});
$(document).click(function(){
$('.float').removeClass('size');
});

</script>
</body>

</html>
Ответить с цитированием
  #17 (permalink)  
Старый 05.12.2013, 02:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

Derekovich,
Вариант клик по другому элементу закрывает предыдущий - всё остальное как выше
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
.float{height: 20px;background: yellow;margin-bottom:10px;}
.size{height:100px}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

</script>
</head>

<body>

<div class="float"></div>
<div class="float"></div>
<div class="float"></div>

<script>
var floats = $('.float');
floats.click(function (event) {
    event.stopPropagation();
    floats.not(this).removeClass('size');
    $(this).toggleClass('size');
});
$(document).click(function () {
    floats.removeClass('size');
});</script>
</body>

</html>

Последний раз редактировалось рони, 05.12.2013 в 02:52.
Ответить с цитированием
  #18 (permalink)  
Старый 05.12.2013, 09:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

Derekovich,
Ещё вариант варианта выше )))
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
.float{height: 20px;background: yellow;margin-bottom:10px;}
.size{height:100px}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

</script>
</head>

<body>

<div class="float"></div>
<div class="float"></div>
<div class="float"></div>

<script>
var floats = $('.float');
$(document).click(function (event) {
    $('.size').not(event.target).removeClass('size');
    $(event.target, floats).toggleClass('size');
});
</script>
</body>

</html>
Ответить с цитированием
  #19 (permalink)  
Старый 05.12.2013, 13:02
Новичок на форуме
Отправить личное сообщение для Derekovich Посмотреть профиль Найти все сообщения от Derekovich
 
Регистрация: 04.12.2013
Сообщений: 8

В данном примере меняется только добавление/удаление единственного класса к элементу. А вот например как сделать, если есть 3 элемента с разными классами, и при клике должно также отображаться описание текста к картинке. Привожу пример самого блока:

<div class="section_1">
<div class="size_image"><img src="skin/frontend/default/il/images/img1.png" alt="" /></div>
<div class="text_img1">
<p>TEXT only for img1</p>
</div>
</div>

Таких картинок на странице 3 штуки, добавляю только в конце класса порядковый номер другой типа class="section_2", class="text_img2" и т.д. Возможно я неправильно сделал разметку, сейчас получается мне нужно для каждого клика необходимо писать обработчик клика, что не есть хорошо. Заранее благодарен!
Ответить с цитированием
  #20 (permalink)  
Старый 05.12.2013, 13:58
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Derekovich
добавляю только в конце класса порядковый номер
Зачем? Не нужно этого делать.
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление/исчезновение дива при клике на ссылку nickostyle jQuery 5 18.01.2016 03:03
Сворачивание блока при клике в любом месте страницы onuvidelsolnce Элементы интерфейса 6 15.04.2013 13:35
Предотвратить изменение размеров страницы при добавлении элемента NeVirus Events/DOM/Window 1 15.03.2013 07:33
Отлов изменения размера элемента. Какие способы есть? danik.js Events/DOM/Window 3 05.02.2013 10:00
При клике в любом месте документа должен удаляться определенный id DorianLeroy jQuery 2 24.12.2011 21:05