Очистить все открытые div

Question

Очистить все открытые div

0

У меня есть скрипт, который открывает div, делая onclick = "toogle_visibility (id)

но как это сделать, когда я хочу закрыть div, который открыт и открыт

новый div?

Javascript/JQuery:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

HTML:

<div class="navBar">
<a href="#social" onclick="toggle_visibility('Social')">Social</a>
<a href="#social" onclick="toggle_visibility('Foljer')">F&ouml;ljer</a>
<a href="#social" onclick="toggle_visibility('Bokmarken')">Bokm&auml;rken</a>
</div>
<div id="Social">
<a href="http://www.twitter.com/Liam_Rab3">@Liam_Rab3 - TWITTER</a><br>
<a href="http://www.twitter.com/Liam_Rab3">@Liam_Rab3 - INSTAGRAM</a><br>
<a href="http://www.facebook.com/LiamRab3">@LiamRab3- FACEBOOK</a><br>
<a href="http://www.youtube.com/howmuchtimedr">@Liam_Rab3 - YOUTUBE</a><br>
<a href="http://www.flickr.com/Liam_Rab3">@Liam_Rab3 - FLICKR</a><br>
<a href="http://www.thenotallowedguy.tk">@Liam_Rab3 - TUMBLR</a><br>
</div>
<div id="Foljer">
<a href="http://www.instagram.com/sebbestakset">Sebbe Stakset (Kartellen)</a>
</div>

CSS:

a:link {
color:white;
text-decoration:none;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
a:hover {
color:white;
text-decoration:none;
font-size:100%;
}
a:visited {
text-shadow:0px 0px 0px #0066BB;
color:white;
}
#social {
display:none;
}
#Foljer {
display:none;
}

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ!

Эти ссылки в ссылках #social и #bokmarken не предназначены для коммерческих целей.

Liam_Rab33 04 янв. 2014, в 02:37

Источник

1

Прекратите помещать JavaScript в комментарии HTML.
Alexis King 04 янв. 2014, в 01:28
0

Вы хотите, чтобы только один из выбранных элементов div ['Social', 'Foljer', 'Bokmarken'] был открыт одновременно, или можно открыть несколько меню?
ZombieBunnies 04 янв. 2014, в 01:32
0

Мы говорим, что я нажимаю «Foljer», но затем я хочу открыть «Social», чтобы div «Foljer» закрывался, а Div «Social» открывался
Liam_Rab33 04 янв. 2014, в 01:36
0

возможный дубликат переключения показа / скрытия div с кнопкой?
Ryan Brodie 04 янв. 2014, в 01:57

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Прекратите помещать JavaScript в комментарии HTML.
Вы хотите, чтобы только один из выбранных элементов div ['Social', 'Foljer', 'Bokmarken'] был открыт одновременно, или можно открыть несколько меню?
Мы говорим, что я нажимаю «Foljer», но затем я хочу открыть «Social», чтобы div «Foljer» закрывался, а Div «Social» открывался
возможный дубликат переключения показа / скрытия div с кнопкой?

Nagaraj Tantri · Answer 1 · 2014-01-03T23-19-00.000Z

Вы можете использовать JQuery Toggle

<div id="clickme">
  Click here !!!
</div>
<a href="#social" >Social</a>

$( "#clickme" ).click(function() {
  $( "#social" ).toggle(); //With no parameters, the .toggle() method simply toggles the visibility of elements:
});

Сначала выберите элемент управления, который вы хотите скрыть/показать, затем используйте этот идентификатор управления следующим образом:

$('#<id-of-that-control>').toggle();

Теперь вы можете вызвать это в обработчике событий onclick кнопки или div по вашему желанию.

Как это может показаться для вас:

JS

function toggle_visibility(id) {
     $('#' + id).toggle();
}

HTML

<div class="navBar">
<a href="#social" onclick="toggle_visibility('Social')">Social</a>
<a href="#social" onclick="toggle_visibility('Foljer')">F&ouml;ljer</a>
<a href="#social" onclick="toggle_visibility('Bokmarken')">Bokm&auml;rken</a>
</div>

Обновление: как указал Броди, казалось бы, вы всегда можете заглянуть в решение, предоставленное Нитом Темным Абсолютом. Поскольку он предоставляет вам чистую реализацию JS. Мое решение даст вам представление об использовании библиотеки JQuery и API для переключения. JQuery предоставляет широкий спектр встроенных функций, которые помогут вам быстро сделать это. В моей части кода вы используете утилиту api ie toggle, которая при использовании будет такой же, как поведение hide и show.

Могу ли я изменить $ ("#book") .toggle ("медленный", function () {с $ ("id") .toggle ("медленный", function () {или что-то в этом роде?
Да, или просто направьте одну функцию и привяжите ее к элементу с помощью $ (this) .click (function ()
Итак ... в основном вы берете совершенно функциональный JavaScript, раздуваете его как завтра с jQuery и все еще не делаете то, что хочет OP ...?
Клянусь, никто не может больше писать чистый JS.
@Niet the Dark Absol firstyl, есть тег JQuery, а также, если все, что мы предоставляем, полный код, то мы по-прежнему не гарантируем, что пользователь научится чему-либо сам. Он начал бы использовать ту же логику, которую мы предоставляем. Таким образом, связь переключения важна для него, читая использование.
@ Броди, я вижу, ты указал ему на вопрос jquery, тогда как дубликат !!!
@LearningByCoding Там есть чистая реализация JS .
@ Броди Ладно, хватит денег, позвольте мне сказать, но ответ выбран в качестве переключателя jquery. Я до сих пор не понимаю, тег говорит также jquery, что не так для этого? Почему понизить?
@LearningByCoding Понятно, что OP не знает о различиях между чистым Javascript и библиотекой, такой как jQuery, на основании его неправильной маркировки фрагмента кода (он содержал ноль jQuery). Я отказался от голосования, так как это дубликат. Я не одобрил ваш собственный ответ, как я согласен с выше: его вопрос и уровень предполагаемого понимания могут быть прояснены с помощью чистого JS вместе с полезным объяснением того, когда целесообразно включать такую библиотеку.
@ Броди достаточно. Обновили ответ, чтобы он мог выбирать знания чистого JS.
toggle даже не является подходящей функцией, потому что OP хочет закрывать то, что открыто ...

Niet the Dark Absol · Answer 2 · 2014-01-03T23-29-00.000Z

В принципе, вам нужно закрыть все DIV и переключить текущий.

Попробуй это:

var ids = ['Social','Foljer','Bokmarken'];
function toggle_visibility(id) {
   var l = ids.length, i, e;
   for( i=0; i<l; i++) {
       e = document.getElementById(ids[i]);
       if( id != ids[i])
          e.style.display = 'none';
       else if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
}