Форум

podlodki · #1 (**permalink**) 17.01.2017, 15:13

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

<script>
var show = document.getElementById(type);
function hidetxt(type){
 param=document.getElementById(type);
 if(param.style.display == "none") {
 if(show) show.style.display = "block";
 param.style.display = "block";
 show = param;
 }else param.style.display = "none"
}
</script>

<div class="questions-main">
			        
<div>
<a onclick="hidetxt('div1');" class="block-title" rel="nofollow" href="#"><span>Ссылка 1</span></a>
<div class="block-main" id="div1">Выпадающий текст 1</p>
</div>
</div>
<div>
<a onclick="hidetxt('div2'); return false;" class="block-title" rel="nofollow" href="#"><span>Ссылка 2</span></a>
<div class="block-main" id="div2">
<p>Выпадающий текст 2</p>
</div>
</div>
<div>
<a onclick="hidetxt('div3'); return false;" class="block-title" rel="nofollow" href="#"><span>Ссылка 3</span></a>
<div class="block-main" id="div3">
<p>Выпадающий текст 3</p>
</div>
</div>
</div>

.questions {padding: 85px 0 63px;}
.questions .title2 {margin-bottom: 43px;}
.block-main {display: none;}
.block-title {position: relative; color: #000; width: 775px; font-size: 19px; line-height: 23px; margin-bottom: 10px; display: inline-block; *display: inline; *zoom: 1; text-decoration: none; cursor: pointer;}
.block-title span {border-bottom: 1px dashed #b2b2b2; }
.block-title:hover span, .opened .block-title span {border: 0;}
.opened .block-title:before {content: ""; position: absolute; left: -23px; top: 10px; width: 0; border: 5px solid transparent; border-top: 4px solid #ff9898;}
.block-title:before {content: ""; position: absolute; left: -23px; top: 10px; width: 0; border: 5px solid transparent; border-left: 4px solid #ff9898; border-top: 4px solid transparent;}
.block-main {background: #fbf8ed; font-size: 18px; padding: 19px 30px; width: 730px;}
.questions-main {margin: 0 0 0 110px;}
.questions-main>div {margin-bottom: 10px;}
.questions-main p {margin-bottom: 10px;}
.questions-main p:last-child {margin-bottom: 0;}

laimas · #2 (**permalink**) 17.01.2017, 16:00

Сообщение от podlodki

var show = document.getElementById(type);

Изначально не будет определено.

рони · #3 (**permalink**) 17.01.2017, 16:01

podlodki,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> .questions {padding: 85px 0 63px;}
.questions .title2 {margin-bottom: 43px;}
.block-main {display: none;}
.block-title {position: relative; color: #000; width: 775px; font-size: 19px; line-height: 23px; margin-bottom: 10px; display: inline-block; *display: inline; *zoom: 1; text-decoration: none; cursor: pointer;}
.block-title span {border-bottom: 1px dashed #b2b2b2; }
.block-title:hover span, .opened .block-title span {border: 0;}
.opened .block-title:before {content: ""; position: absolute; left: -23px; top: 10px; width: 0; border: 5px solid transparent; border-top: 4px solid #ff9898;}
.block-title:before {content: ""; position: absolute; left: -23px; top: 10px; width: 0; border: 5px solid transparent; border-left: 4px solid #ff9898; border-top: 4px solid transparent;}
.block-main {background: #fbf8ed; font-size: 18px; padding: 19px 30px; width: 730px;}
.questions-main {margin: 0 0 0 110px;}
.questions-main>div {margin-bottom: 10px;}
.questions-main p {margin-bottom: 10px;}
.questions-main p:last-child {margin-bottom: 0;}

  </style>
<script>
function hidetxt(a) {
    a = document.getElementById(a).style;
    a.display = "block" != a.display ? "block" : "none"
};
</script>
  </script>
</head>

<body>



<div class="questions-main">

<div>
<a onclick="hidetxt('div1');" class="block-title" rel="nofollow" href="#"><span>Ссылка 1</span></a>
<div class="block-main" id="div1"><p>Выпадающий текст 1</p>
</div>
</div>
<div>
<a onclick="hidetxt('div2'); return false;" class="block-title" rel="nofollow" href="#"><span>Ссылка 2</span></a>
<div class="block-main" id="div2">
<p>Выпадающий текст 2</p>
</div>
</div>
<div>
<a onclick="hidetxt('div3'); return false;" class="block-title" rel="nofollow" href="#"><span>Ссылка 3</span></a>
<div class="block-main" id="div3">
<p>Выпадающий текст 3</p>
</div>
</div>
</div>


</body>
</html>

podlodki · #4 (**permalink**) 17.01.2017, 16:08

Огромное Вам спасибо!

рони · #5 (**permalink**) 17.01.2017, 16:09

Сообщение от podlodki

Что надо исправить?

понять что css .block-main {display: none;} не имеет к атрибуту style никакого отношения, а значит if(param.style.display == "none") будет false и только тогда в style появится none (else param.style.display = "none") , ваш код начнёт работать, но уже со второго раза.

рони · #6 (**permalink**) 17.01.2017, 16:13

podlodki,

Цитата:

свойство style дает доступ только к той информации, которая хранится в elem.style.

https://learn.javascript.ru/styles-and-classes

Форум

Справочник

Discord чат

Курсы javascript