Форум программистов, компьютерный форум, киберфорум
jQuery
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript > jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.87/15: Рейтинг темы: голосов - 15, средняя оценка - 4.87
2 / 2 / 0
Регистрация: 10.09.2013
Сообщений: 48

Исчезновение текста(блока) при нажатии на него

02.10.2013, 13:22. Показов 2905. Ответов 9
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Всем привет!) Сделал выплывающий текст при нажатии на ссылку. Но он исчезает когда нажимаешь на сам текст. Как это убрать? Но блок должен исчезать при этом, если нажимаешь на ссылку или вне границ ссылки, но не когда на текст. Спасибо!)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  <style>
    body {
      width:1000px;
      height:1000px;
    }
    .block-sap-img {
        padding:18px;
        border:3px solid #e2e2e2;
        display:block;
        position:relative;
        float:left;
        width:300px;
        cursor:pointer;
        span.platform-tooltip {
            display:none;
            position:absolute;
            top:100%;
            left:-118px;
            width:253px;
 
            box-shadow:0px 5px 21px #d6e0e5;
            font-size:12px;
            color:#222;
            line-height:18px;
            z-index:3;
            background:#fff;
            font-weight:normal;
            padding:12px 15px 12px 45px;
 
            margin-top:10px;
            b {
                font-size:14px;
                color:#181818;
            }
            a {
                font-style:italic;
            }
            i {
                width:12px;
                height:13px;
                position:absolute;
                top:14px;
                left:25px;
                background:url(../images/icons.png) no-repeat -20px -13px;
 
                display:block;
            }
            .arrow {
                position:absolute;
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #fff;
                background:none;
                padding:0;
                box-shadow:none;
                top:-8px;
                left:50%;
                margin-left:-4px;
                z-index:3;
                margin:0px;
            }
        }
 
        .prev-text {
            margin-top:10px;
            .title{
                font-size:14px;
                color:#181818;
                text-transform:uppercase;
                font-weight:bold;
                line-height:14px;
            }
            span {
                font-size:12px;
            }
        }
 
    }
  </style>
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
 
<a class="block-sap-img">  
  <div class="prev-text">
    <span>Тест</span>
  </div>
  <span class="platform-tooltip">
    <span class="arrow"></span>
    <i></i><b>Всплывающий текст</b>
    <br/>Всплывающий текст<br/>
  </span>
</a>  
 
<script>
  
    $(".block-sap-img").click(function(e)    
    {   
        e.preventDefault();
                $(".platform-tooltip").fadeToggle("fast");//slideToggle fadeToggle
        $(this).toggleClass("active");
                $(".platform-tooltip").css(
                {
                    "overflow":""
                });
      
    });
  $(document).on("click",function(e)
    {      
      if($(e.target).parents().index($('.block-sap-img').parent()) == -1)
      {        
    if($(".platform-tooltip").length)
              $(".platform-tooltip").fadeOut("fast");//slideUp fadeOut
      }
      
    });
    
</script>
 
</body>
</html>
Добавлено через 1 час 17 минут
Может кто помочь пожалуйста?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 02.10.2013, 13:22
Ответы с готовыми решениями:

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

Изменение угла поворота блока при нажатии на него.
var block = $(&quot;.cube&quot;); block.click(function (){ block.style.transform = &quot; rotate3d(1,0,0,90deg)&quot;; }); Имеется 3д куб. 6...

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

9
112 / 112 / 18
Регистрация: 24.09.2013
Сообщений: 509
02.10.2013, 14:10
Поменяйте
JavaScript
1
2
3
4
5
6

$(".block-sap-img").click(function(e)    
    {   
        e.preventDefault();
                $(".platform-tooltip").fadeToggle("fast");//slideToggle fadeToggle
        $(this).toggleClass("activ..................
........................
На
JavaScript
1
2
3
4
5
6

$(".prev-text").click(function(e)    
    {   
        e.preventDefault();
                $(".platform-tooltip").fadeToggle("fast");//slideToggle fadeToggle
        $(this).toggleClass("activ..................
.........................
И будет вам счастье)
1
2 / 2 / 0
Регистрация: 10.09.2013
Сообщений: 48
02.10.2013, 18:49  [ТС]
Web_Master, но если по ссылке нажимаешь, то блок не исчезает. А надо чтобы на все кроме самого выплывающего текста.
0
112 / 112 / 18
Регистрация: 24.09.2013
Сообщений: 509
02.10.2013, 19:12
я только-что еще раз проверил, всё работает как вы хотите.
Просто надо поменять $(".block-sap-img") на $(".prev-text") в стоке 104.
При нажатии на ссылку текст убирается
0
2 / 2 / 0
Регистрация: 10.09.2013
Сообщений: 48
04.10.2013, 13:13  [ТС]
Web_Master, а вот я сделал, что элементов допустим два. Две ссылки. когда нажимаешь на одну, то появляется текст сразу из двух ссылок, как это исправить?

Добавлено через 27 секунд
Вот я тут попробовал, но не корректно работает(
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <a class="block-sap-img">    
    <div class="prev-text">     
     Text 1
    </div>
    <span class="platform-tooltip" style="display:none;">
      <span class="arrow"></span>
      <i></i><b>Высплывающий текст 1 </b>
      <br/>Всплывающий текст 1<br/>
    </span>
  </a>
  <a class="block-sap-img">    
    <div class="prev-text">     
     Text 2
    </div>
    <span class="platform-tooltip" style="display:none;">
      <span class="arrow"></span>
      <i></i><b>Высплывающий текст 2</b>
      <br/>Всплывающий текст 2 <br/>
    </span>
  </a>
  
<script>
    $(".block-sap-img").click(function(e)
    {
        e.preventDefault();
        $(this).children().fadeToggle("fast");
        $(this).toggleClass("active");          
        $(this).children().css("overflow","");
 
    });
 
    // скрытие тултипов попапов
    $(document).on("click",function(e){
        if($(e.target).parents().index($('.block-sap-img').parent()) == -1)
            if($(".platform-tooltip").length)
                $(".platform-tooltip").fadeOut("fast");
    });
 
    $(".platform-tooltip").click(function(e){
        e.stopPropagation();
    });
</script>
 
</body>
</html>
Добавлено через 13 минут
Web_Master, вот здесь при нажатии на TWO TEXT появляется и тут же исчезает всплывающий текст этой ссылки...как исправить?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <ul>    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            ONE TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>ONE</b>
          <br/>ONE<br/>
        </span>
      </a>
    </li>
  </ul>
  <ul>    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            TWO TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>TWO</b>
          <br/>TWO<br/>
        </span>
      </a>
    </li>
  </ul>
  
<script>
    $(".block-sap-img").click(function(e)
    {
        e.preventDefault();
        $(this).children(".platform-tooltip").fadeToggle("fast");
        $(this).toggleClass("active");          
        $(this).children(".platform-tooltip").css("overflow","");
 
    });
 
    // скрытие тултипов попапов
    $(document).on("click",function(e){
        var $result = $('.block-sap-img');
        if($(e.target).parents().index($result.parent()) == -1)
          if($result.children(".platform-tooltip").length)
                $result.children(".platform-tooltip").fadeOut("fast");
    });
 
    $(".platform-tooltip").click(function(e){
        e.stopPropagation();
    });
</script>
 
</body>
</html>
Я сейчас сам пробую, но не получается(

Добавлено через 9 минут
И так же , если нажать вне границ ссылки, то исчезает еще и первый всплывающий текст( Как всё это исправить?

Добавлено через 3 минуты
Так же я только что заметил, что при клике на ссылку (любую одну), то активными становятся и остальные(
0
112 / 112 / 18
Регистрация: 24.09.2013
Сообщений: 509
04.10.2013, 13:38
Цитата Сообщение от Pupsik86 Посмотреть сообщение
как исправить?
Вот так
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  <style>
    body {
      width:1000px;
      height:1000px;
    }
    .block-sap-img {
        padding:18px;
        border:3px solid #e2e2e2;
        display:block;
        position:relative;
        /*float:left;*/
        width:300px;
        cursor:pointer;
        span.platform-tooltip {
            display:none;
            position:absolute;
            top:100%;
            left:-118px;
            width:253px;
 
            box-shadow:0px 5px 21px #d6e0e5;
            font-size:12px;
            color:#222;
            line-height:18px;
            z-index:3;
            background:#fff;
            font-weight:normal;
            padding:12px 15px 12px 45px;
 
            margin-top:10px;
            b {
                font-size:14px;
                color:#181818;
            }
            a {
                font-style:italic;
            }
            i {
                width:12px;
                height:13px;
                position:absolute;
                top:14px;
                left:25px;
                background:url(../images/icons.png) no-repeat -20px -13px;
 
                display:block;
            }
            .arrow {
                position:absolute;
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #fff;
                background:none;
                padding:0;
                box-shadow:none;
                top:-8px;
                left:50%;
                margin-left:-4px;
                z-index:3;
                margin:0px;
            }
        }
 
        .prev-text {
            margin-top:10px;
            .title{
                font-size:14px;
                color:#181818;
                text-transform:uppercase;
                font-weight:bold;
                line-height:14px;
            }
            span {
                font-size:12px;
            }
        }
 
    }
  </style>
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
 
<a class="block-sap-img">  
  <div class="prev-text">
    <span>Тест1</span>
  </div>
  <span class="platform-tooltip">
    <span class="arrow"></span>
    <i></i><b>Всплывающий текст1</b>
    <br/>Всплывающий текст1<br/>
  </span>
</a>
 
<br/>
 
<a class="block-sap-img">  
  <div class="prev-text">
    <span>Тест2</span>
  </div>
  <span class="platform-tooltip">
    <span class="arrow"></span>
    <i></i><b>Всплывающий текст2</b>
    <br/>Всплывающий текст2<br/>
  </span>
</a>  
 
<br/>
 
<a class="block-sap-img">  
  <div class="prev-text">
    <span>Тест3</span>
  </div>
  <span class="platform-tooltip">
    <span class="arrow"></span>
    <i></i><b>Всплывающий текст3</b>
    <br/>Всплывающий текст3<br/>
  </span>
</a>  
 
<br/>
 
<a class="block-sap-img">  
  <div class="prev-text">
    <span>Тест4</span>
  </div>
  <span class="platform-tooltip">
    <span class="arrow"></span>
    <i></i><b>Всплывающий текст4</b>
    <br/>Всплывающий текст4<br/>
  </span>
</a>
 
<br/>
 
<a class="block-sap-img">  
  <div class="prev-text">
    <span>Тест5</span>
  </div>
  <span class="platform-tooltip">
    <span class="arrow"></span>
    <i></i><b>Всплывающий текст5</b>
    <br/>Всплывающий текст5<br/>
  </span>
</a>
 
 
<script>
  
    $(".prev-text").click(function(e)    
    {   
        e.preventDefault();
        $(this).next('.platform-tooltip').fadeToggle("fast");//slideToggle fadeToggle
        $(this).toggleClass("active");
        $(this).next('.platform-tooltip').css(
                {
                    "overflow":""
                });
      
    });
  $(document).on("click",function(e)
    {      
      if($(e.target).parents().index($('.block-sap-img').parent()) == -1)
      {        
    if($(".platform-tooltip").length)
              $(".platform-tooltip").fadeOut("fast");//slideUp fadeOut
      }
      
    });
    
</script>
 
</body>
</html>
0
2 / 2 / 0
Регистрация: 10.09.2013
Сообщений: 48
04.10.2013, 13:51  [ТС]
Web_Master, второй и третий высплывающие тексты появляются и сразу же исчезают
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <ul>    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            ONE TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>ONE</b>
          <br/>ONE<br/>
        </span>
      </a>
    </li>
  </ul>
  <ul class="last">    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            TWO TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>TWO</b>
          <br/>TWO<br/>
        </span>
      </a>
    </li>
  </ul>
  <ul>    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            THREE TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>THREE</b>
          <br/>THREE<br/>
        </span>
      </a>
    </li>
  </ul>
  
<script>
  
    $(".prev-text").click(function(e)    
    {   
        e.preventDefault();
        $(this).next('.platform-tooltip').fadeToggle("fast");//slideToggle fadeToggle
        $(this).toggleClass("active");
        $(this).next('.platform-tooltip').css(
                {
                    "overflow":""
                });
      
    });
  $(document).on("click",function(e)
    {      
      if($(e.target).parents().index($('.block-sap-img').parent()) == -1)
      {        
    if($(".platform-tooltip").length)
              $(".platform-tooltip").fadeOut("fast");//slideUp fadeOut
      }
      
    });
 
    
  
</script>
 
</body>
</html>
Добавлено через 1 минуту
Web_Master, вот на этом коде попробуйте пожалуйста.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  <style>
    body {
      width:1000px;
      height:1000px;
    }
    .block-sap-img {
        padding:18px;
        border:3px solid #e2e2e2;
        display:block;
        position:relative;
        /*float:left;*/
        width:300px;
        cursor:pointer;
        span.platform-tooltip {
            display:none;
            position:absolute;
            top:100%;
            left:-118px;
            width:253px;
 
            box-shadow:0px 5px 21px #d6e0e5;
            font-size:12px;
            color:#222;
            line-height:18px;
            z-index:3;
            background:#fff;
            font-weight:normal;
            padding:12px 15px 12px 45px;
 
            margin-top:10px;
            b {
                font-size:14px;
                color:#181818;
            }
            a {
                font-style:italic;
            }
            i {
                width:12px;
                height:13px;
                position:absolute;
                top:14px;
                left:25px;
                background:url(../images/icons.png) no-repeat -20px -13px;
 
                display:block;
            }
            .arrow {
                position:absolute;
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #fff;
                background:none;
                padding:0;
                box-shadow:none;
                top:-8px;
                left:50%;
                margin-left:-4px;
                z-index:3;
                margin:0px;
            }
        }
 
        .prev-text {
            margin-top:10px;
            .title{
                font-size:14px;
                color:#181818;
                text-transform:uppercase;
                font-weight:bold;
                line-height:14px;
            }
            span {
                font-size:12px;
            }
        }
 
    }
  </style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <ul>    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            ONE TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>ONE</b>
          <br/>ONE<br/>
        </span>
      </a>
    </li>
  </ul>
  <ul class="last">    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            TWO TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>TWO</b>
          <br/>TWO<br/>
        </span>
      </a>
    </li>
  </ul>
  <ul>    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            THREE TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>THREE</b>
          <br/>THREE<br/>
        </span>
      </a>
    </li>
  </ul>
  
<script>
  
    $(".block-sap-img").click(function(e)
    {
        e.preventDefault();
        $(this).children(".platform-tooltip").fadeToggle("fast");
        $(this).toggleClass("active");          
        $(this).children(".platform-tooltip").css("overflow","");
 
    });
 
    // скрытие тултипов попапов
    $(document).on("click",function(e){         
        if($(e.target).parents().index($('.block-sap-img').parent()) == -1)
          if($(".platform-tooltip").length)
                $(".platform-tooltip").fadeOut("fast");
    });
 
    $(".platform-tooltip").click(function(e){
        e.stopPropagation();
    });
  
</script>
 
</body>
</html>
Добавлено через 2 минуты
Web_Master, и на prev-text не то, что мне бы хотелось. Так как блок не исчезает если нажать на <li>

Добавлено через 3 минуты
Потому что кликать нужно на ссылку, а не на блок "prev-text"

Добавлено через 2 минуты
Вот всё, что у меня получилось, но второй и следующие тексты появляются и исчезают(

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  <style>
    body {
      width:1000px;
      height:1000px;
    }
    .block-sap-img {
        padding:18px;
        border:3px solid #e2e2e2;
        display:block;
        position:relative;
        /*float:left;*/
        width:300px;
        cursor:pointer;
        span.platform-tooltip {
            display:none;
            position:absolute;
            top:100%;
            left:-118px;
            width:253px;
 
            box-shadow:0px 5px 21px #d6e0e5;
            font-size:12px;
            color:#222;
            line-height:18px;
            z-index:3;
            background:#fff;
            font-weight:normal;
            padding:12px 15px 12px 45px;
 
            margin-top:10px;
            b {
                font-size:14px;
                color:#181818;
            }
            a {
                font-style:italic;
            }
            i {
                width:12px;
                height:13px;
                position:absolute;
                top:14px;
                left:25px;
                background:url(../images/icons.png) no-repeat -20px -13px;
 
                display:block;
            }
            .arrow {
                position:absolute;
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #fff;
                background:none;
                padding:0;
                box-shadow:none;
                top:-8px;
                left:50%;
                margin-left:-4px;
                z-index:3;
                margin:0px;
            }
        }
 
        .prev-text {
            margin-top:10px;
            .title{
                font-size:14px;
                color:#181818;
                text-transform:uppercase;
                font-weight:bold;
                line-height:14px;
            }
            span {
                font-size:12px;
            }
        }
 
    }
  </style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <ul>    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            ONE TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>ONE</b>
          <br/>ONE<br/>
        </span>
      </a>
    </li>
  </ul>
  <ul class="last">    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            TWO TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>TWO</b>
          <br/>TWO<br/>
        </span>
      </a>
    </li>
  </ul>
  <ul>    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            THREE TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>THREE</b>
          <br/>THREE<br/>
        </span>
      </a>
    </li>
  </ul>
  
<script>
  
    $(".block-sap-img").click(function(e)    
    {   
        e.preventDefault();
        $(this).children('.platform-tooltip').fadeToggle("fast");//slideToggle fadeToggle
        $(this).toggleClass("active");
        $(this).children('.platform-tooltip').css(
                {
                    "overflow":"",
                    "display":"block"
                });
      
    });
  $(document).on("click",function(e)
    {      
      if($(e.target).parents().index($('.block-sap-img').parent()) == -1)
      {      
        if($(".platform-tooltip").length)
          $(".platform-tooltip").fadeOut("fast");//slideUp fadeOut
      }
      
    });
    $(".platform-tooltip").click(function(e){
        e.stopPropagation();
    });
  
</script>
 
</body>
</html>
0
112 / 112 / 18
Регистрация: 24.09.2013
Сообщений: 509
04.10.2013, 14:50
Вот
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  <style>
    body {
      width:1000px;
      height:1000px;
    }
    .block-sap-img {
        padding:18px;
        border:3px solid #e2e2e2;
        display:block;
        position:relative;
        /*float:left;*/
        width:300px;
        cursor:pointer;
        span.platform-tooltip {
            display:none;
            position:absolute;
            top:100%;
            left:-118px;
            width:253px;
 
            box-shadow:0px 5px 21px #d6e0e5;
            font-size:12px;
            color:#222;
            line-height:18px;
            z-index:3;
            background:#fff;
            font-weight:normal;
            padding:12px 15px 12px 45px;
 
            margin-top:10px;
            b {
                font-size:14px;
                color:#181818;
            }
            a {
                font-style:italic;
            }
            i {
                width:12px;
                height:13px;
                position:absolute;
                top:14px;
                left:25px;
                background:url(../images/icons.png) no-repeat -20px -13px;
 
                display:block;
            }
            .arrow {
                position:absolute;
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #fff;
                background:none;
                padding:0;
                box-shadow:none;
                top:-8px;
                left:50%;
                margin-left:-4px;
                z-index:3;
                margin:0px;
            }
        }
 
        .prev-text {
            margin-top:10px;
            .title{
                font-size:14px;
                color:#181818;
                text-transform:uppercase;
                font-weight:bold;
                line-height:14px;
            }
            span {
                font-size:12px;
            }
        }
 
    }
  </style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <ul>    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            ONE TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>ONE</b>
          <br/>ONE<br/>
        </span>
      </a>
    </li>
  </ul>
  <ul class="last">    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            TWO TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>TWO</b>
          <br/>TWO<br/>
        </span>
      </a>
    </li>
  </ul>
  <ul>    
    <li>
      <a class="block-sap-img">
        <div class="prev-text">
            THREE TEXT
        </div>
        <span class="platform-tooltip" style="display:none;">
          <span class="arrow"></span>
          <i></i><b>THREE</b>
          <br/>THREE<br/>
        </span>
      </a>
    </li>
  </ul>
  
<script>
  
    $(".block-sap-img").click(function(e)    
    {   
        e.preventDefault();
        if($(this).attr('class') == 'block-sap-img active')    {
            $(this).children('.platform-tooltip').fadeOut("fast");//slideToggle fadeToggle
            $(this).toggleClass("active",false);
            $(this).children('.platform-tooltip').css(
                {
                    "overflow":"",
                    "display":"block"
                });
                
        }    else {
            $(this).children('.platform-tooltip').fadeIn("fast");//slideToggle fadeToggle
            $(this).toggleClass("active",true);
            $(this).children('.platform-tooltip').css(
                {
                    "overflow":"",
                    "display":"block"
                });
        }
        
        
       
      
    });
    
    
    
    
    
$(document).on("click",function(e)
    {      
        var GG = $(e.target).parents('.block-sap-img').index();
        if(GG == 0)    {}    else {$(".platform-tooltip").fadeOut("fast");}//slideUp fadeOut
        
      /*if($(e.target).parents().index($('.block-sap-img').parent()) == -1)
      {      
        if($(".platform-tooltip").length)
          
      }
      */
    });
    
    
    
    
    
    $(".platform-tooltip").click(function(e){
        e.stopPropagation();
    });
  
</script>
 
</body>
</html>
0
2 / 2 / 0
Регистрация: 10.09.2013
Сообщений: 48
04.10.2013, 18:41  [ТС]
Web_Master, а как Вам вот такой путь решения?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(".block-sap-img").click(function(e)
    {
        $(".block-sap-img.active").not($(this)).removeClass("active").find(".platform-tooltip").fadeOut();
        e.preventDefault();
        $(this).children(".platform-tooltip").fadeToggle("fast").css("overflow","");;
        $(this).toggleClass("active");
    });
 
    // скрытие тултипов попапов
    $(document).on("click",function(e){
        if($(e.target).parents().index($('.block-sap-img.active').parent()) == -1)
            if($(".platform-tooltip").length)
                $(".platform-tooltip").fadeOut("fast");
    });
 
    $(".platform-tooltip").click(function(e){
        e.stopPropagation();
    });
0
112 / 112 / 18
Регистрация: 24.09.2013
Сообщений: 509
04.10.2013, 18:55
главное что работает так как вы хотели)
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 04.10.2013, 18:55
Помогаю со студенческими работами здесь

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

Исчезновение одной кнопки при нажатии другой
Здравствуйте,уважаемые знатоки:)Задача такая:нужно при нажатии кнопки№1 чтоб пропадала кнопка 2 и при нажатии кнопки 2 пропадали кнопки 1 и...

Плавное перемещение одного блока наверх и исчезновение других блоков при клике
Добрый день, Подскажите, пожалуйста, есть ли уже реализованный код или где можно найти идейки для реализации такого замысла: нужно...

Открыть закрыть блок при нажатии по ссылке и закрыть его при нажатии вне этого блока
Здравствуйте, несколько дней уже пытаюсь решить задачу, мне нужно сделать блок с авторизацией. Нужно что бы при нажатии на ссылку блок...

Появление/исчезновение элементов и исчезновение при клике на другой
Привет. Есть такое меню (картинка ниже). Нужно чтобы при клике на ссылку, появлялись текст и картинка. Вообщем, я хотел сделать через...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Символьное дифференцирование
igorrr37 13.02.2026
/ * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
 SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru