1

Тема: як створити стрілочку

Доброго вечора понове.
ПРошу вашої допомоги.
Як зробити такий елемент:
І як зробити так, щоб стрілочка змінювалась при натисканні.
Є такий код по формленню цієї срілочки:

.question-section8{
  display: block;
  margin-bottom:25px; 
  color: #000;
  width: 100%;
}

.question-section8:after{
  content: " "; 
  margin-top: 2px;
  text-align: center;  
  color: #fff;  
  background: url("../img/Medical-Ukraine-Dentistry_0016_icon.png") no-repeat;  
  float: left;  
  position: relative;
  width: 7px;
  height: 14px;
}

Але проблема в тому, що стрілочка одразу прибивається в право із-за float:right. Як зробити так, щоб виглядало як на малюнку. Фіксована ширина не підходить так-як посилання мають різну кількість символів.
Суть у тому що спливає текст, що є скритим.
У мене є скрипт, що показує скриті елементи

function look(t){
     p=document.getElementById(t);
     l=document.getElementById("a-"+t);
    if(p.style.display=="none"){
        l.innerHTML="Cкрыть";        
        p.style.display="block";}
    else{
        l.innerHTML="Подробнее";
        p.style.display="none";}
    }
Post's attachments

Без-имени-1.png 2.29 kb, 162 downloads since 2016-12-22 

Подякували: 221VOLT1

2

Re: як створити стрілочку

poperechnyi1 написав:

Але проблема в тому, що стрілочка одразу прибивається в право із-за float:right.

"Вправо" в одне слово і "через", а не "із-за".
Я не бачу у вашому коді float:right. Ви точно нічого не наплутали? Чи вам телепати потрібні, які зрозуміють без коду, де там той float:right? І де HTML? Викладіть посилання на сайт чи на jsfiddle з відповідним кодом.

Подякували: 221VOLT1

3

Re: як створити стрілочку

Хм...Можливо щось наплутаю(просто вже очі зліпаються, йшов спати).
Загалом:
1. Можна зробити через якийсь шрифт. Наприклад, Font Awesome. Є там http://fontawesome.io/icon/caret-right/, раптом підійде. В принципі його можна просто поставити після потрібного тексту і за бажанням додати відступи, колір, розмір тощо. Як на мене - це найпростіший варіант.
2. Почитайте оцю статтю: http://htmlbook.ru/blog/treugolniki-cherez-css. Просто почитайте, розберіться і підлаштуйте для себе.

Якщо що, то пишіть. З задоволенням допоможу  *DRINK*

Подякували: 221VOLT, poperechnyi12

4 Востаннє редагувалося 221VOLT (23.12.2016 00:48:27)

Re: як створити стрілочку

Викладіть посилання на сайт чи на jsfiddle з відповідним кодом.

+1

проблема вирішується достатньо швидко,
при чому існує більше двох способів вирішення,
проте потрібен живий приклад, який можна відредагувати

Подякували: Monolith, koala2

5 Востаннє редагувалося poperechnyi1 (23.12.2016 18:56:33)

Re: як створити стрілочку

Коротше кажучи.
1. Стрілочку я зробив одразу, але вона прилипала в правий край. І дпотім я здогадався змінити одне поле
з  position: relative; на position: absolute; і все стало виглядати як на картинці.

.question-section8:after{
  content: " "; 
  margin-top: 2px;
  text-align: center;  
  color: #fff;  
  background: url("../img/Medical-Ukraine-Dentistry_0016_icon.png") no-repeat;  
  float: right;  
  position: absolute;
  width: 7px;
  height: 14px;
}

.question-section8-active:after{
  content: " "; 
  margin-top: 2px;
  text-align: center;  
  color: #fff;  
  background: url("../img/Medical-Ukraine-Dentistry_0031_icon.png") no-repeat; 
  float: right;  
  position: absolute;
  width: 14px;
  height: 7px;
}
Подякували: Monolith, 221VOLT2

6

Re: як створити стрілочку

Ось скрипт, щоб стрілочка змінювалась при натисканні

$('.question-section8').click(function(){
        var id_elm = $(this).attr('data-id');
        if($(this).hasClass('question-section8-active')){
            
            $(this).removeClass('question-section8-active');
            $("#"+id_elm).removeClass('answer1-active');
            
        }else{
            $(this).addClass('question-section8-active');
            $("#"+id_elm).addClass('answer1-active');
            

        }
    });
Подякували: Monolith1

7

Re: як створити стрілочку

misha_bondar_2012 написав:

Хм...Можливо щось наплутаю(просто вже очі зліпаються, йшов спати).
Загалом:
1. Можна зробити через якийсь шрифт. Наприклад, Font Awesome. Є там http://fontawesome.io/icon/caret-right/, раптом підійде. В принципі його можна просто поставити після потрібного тексту і за бажанням додати відступи, колір, розмір тощо. Як на мене - це найпростіший варіант.
2. Почитайте оцю статтю: http://htmlbook.ru/blog/treugolniki-cherez-css. Просто почитайте, розберіться і підлаштуйте для себе.

Якщо що, то пишіть. З задоволенням допоможу  *DRINK*

Дякую за статті, допомогли розібратись.

Подякували: Monolith1

8

Re: як створити стрілочку

А чи не простіше зробити так:

CSS:
.answer1{...}
.answer1 .active{...}
.question-section8:after{...}
.question-section8 .active:after{...}

JavaScript:
$('.question-section8').click(function(){
        var id_elm = $(this).attr('data-id');
        if(id_elm) {
                $(this).toggleClass('active');
                $("#"+id_elm).toggleClass('active');
        }
});

А ще можна додати їм якусь спільну позначку, на кшталт тієї ж data-id, і робити
$("[data_id='"+id_elm+"']").toggleClass(active);
щоб вони мінялися одночасно.

Подякували: 221VOLT1

9 Востаннє редагувалося 221VOLT (24.12.2016 05:52:42)

Re: як створити стрілочку

а хто зробить чисто на css, без використання js чи (ой фу фу) jQuery?

залишились ще козаки, залишились ще джедаї?

*задумався де положив свою шаблю свій джедайський меч свій подібний приклад, вирішуваний і вирішений з рік назад (здається я тоді просто додав ще один тег в html, і трошки css збільшилось, щоб не теребонькати js)

10 Востаннє редагувалося koala (24.12.2016 08:34:11)

Re: як створити стрілочку

Не бачу HTML. А без нього важко.
От якби знати, що щось там вкладене чи поруч, то просто ставимо checkbox з відповідним оформленням і вперед...

Подякували: 221VOLT1

11

Re: як створити стрілочку

не розумію для чого клік... але то таке

зробив 3 способами тримай

http://codepen.io/anon/pen/MbdJZV

Подякували: 221VOLT1

12

Re: як створити стрілочку

Key написав:

не розумію для чого клік... але то таке

зробив 3 способами тримай

http://codepen.io/anon/pen/MbdJZV

Йому треба спойлер зробити, і невідомо, де знаходиться текст спойлера.

Подякували: 221VOLT1

13

Re: як створити стрілочку

koala написав:
Key написав:

не розумію для чого клік... але то таке

зробив 3 способами тримай

http://codepen.io/anon/pen/MbdJZV

Йому треба спойлер зробити, і невідомо, де знаходиться текст спойлера.


тоді checkbox не дуже добра ідея, погана підтримка браузерами...
хоча в майбутньому має право на життя

14

Re: як створити стрілочку

Можливо я просто не зрозумів задачі...
Просто при наведенні збільшувати відступ стрілочці. Чи ні?

Подякували: 221VOLT1

15

Re: як створити стрілочку

Key написав:

тоді checkbox не дуже добра ідея, погана підтримка браузерами...
хоча в майбутньому має право на життя

чому це не дуже добра ідея?
як один з робочих варіантів

misha_bondar_2012 написав:

Можливо я просто не зрозумів задачі...
Просто при наведенні збільшувати відступ стрілочці. Чи ні?

здається ще колір поміняти + джаваскриптом щось показати чи приховати?

чи мо я також не зрозумів нічого *DONT_KNOW*

16

Re: як створити стрілочку

Key написав:
koala написав:
Key написав:

не розумію для чого клік... але то таке

зробив 3 способами тримай

http://codepen.io/anon/pen/MbdJZV

Йому треба спойлер зробити, і невідомо, де знаходиться текст спойлера.


тоді checkbox не дуже добра ідея, погана підтримка браузерами...
хоча в майбутньому має право на життя

Як на мене ідея нормальна. Але прошу автора нормально вказати питання. Якщо йому треба поміняти колір/відступ у елементу - це робиться за допомогою чистого CSS буквально у кілька рядків.

Подякували: 221VOLT1