Закрытие/скрытие divs с js

Question

Hello & С Новым годом всем.

Мой вопрос касается затухания и скрытия divs с js. На моей странице есть 2 или 3 div. В настоящее время, когда я нажимаю на div, он исчезает. Когда я нажимаю на второй div, он также исчезает, и первый div скрывается.

Когда я нажимаю на div дважды, я хочу, чтобы он закрылся. Я могу открыть второй div, и он закроет первый, но второй div все еще открыт, и я не могу разобраться, как его закрыть. Вы можете увидеть здесь, на этом изображении, я нажимаю на «country» div, и он открывается http://prntscr.com/2g4dmw, затем я нажимаю «качество», и он открывается http://prntscr.com/2g4duf, но я не могу его закрыть. Я использую этот код:

<script> 
$(document).ready(function(){ 

     $("div #industry").click(function(){ 
       $("div #stars").hide(); 
       $("div #countries").hide(); 
       $("div #industries").fadeIn('500'); 

      }); 

     $("div #star").click(function(){ 
       $("div #industries").hide(); 
       $("div #countries").hide(); 
       $("div #stars").fadeIn('500'); 
      }); 

     $("div #country").click(function(){ 
       $("div #industries").hide(); 
       $("div #stars").hide(); 
       $("div #countries").fadeIn('500'); 
      }); 

    }); 

Я признателен за любую помощь, если и нужно больше информации, не стесняйтесь спрашивать.

Answer 1

http://jsfiddle.net/n8rwA/

$(document).ready(function(){ 

    $("#industry").click(function(){ 
      $("#stars").hide(); 
      $("#countries").hide(); 
      $("#industries").slideToggle("slow"); 

     }); 

    $("#star").click(function(){ 
      $("#industries").hide(); 
      $("#countries").hide(); 
      $("#stars").slideToggle("slow"); 
     }); 

    $("#country").click(function(){ 
      $("#industries").hide(); 
      $("#stars").hide(); 
      $("#countries").slideToggle("slow"); 
     }); 

}); 

Вы можете использовать переключатель функции или slidetoggle.

Answer 2

Проблема заключается в том, что вы закрываете весь DIV, в то время как вы должны иметь структуру, как и для каждой секции:

<a href="#" id="countryLink">Countries</a> 
<div id="countries"></div> 
<a href="#" id="industryLink">Industry</a> 
<div id="industries"></div> 
<a href="#" id="stars">Stars</a> 
<div id="stars"></div> 

, а затем связываются с щелчками ссылок не сами дивы, таким образом ссылки остаются там, поэтому вы можете щелкнуть их снова, чтобы открыть его.

$(document).ready(function(){ 

    $("#industryLink").click(function(){ 
      $("div #stars").hide(); 
      $("div #countries").hide(); 
      $("div #industries").fadeIn('500'); 

     }); 

    $("#starsLink").click(function(){ 
      $("div #industries").hide(); 
      $("div #countries").hide(); 
      $("div #stars").fadeIn('500'); 
     }); 

    $("#countryLink").click(function(){ 
      $("div #industries").hide(); 
      $("div #stars").hide(); 
      $("div #countries").fadeIn('500'); 
     }); 

}); 

Answer 3

H я,

Рассмотрим эту разметку

<div class="contentcontainer"> 
    <h3>Country</h3> 
    <div class="content"> 
     I am the content for country 
    </div> 
</div> 

<div class="contentcontainer"> 
    <h3>Industry</h3> 
    <div class="content"> 
     I am the content for Industry 
    </div> 
</div> 

<div class="contentcontainer"> 
    <h3>Stars</h3> 
    <div class="content"> 
     I am the content for Stars 
    </div> 
</div> 

Ваш Javascript может быть сокращен до:

$(".contentcontainer").on("click", function() { 
     $(".content").each(function() { $(this).hide(); }); 
     $(this).find(".content").show(); 
    }); 

• событие нажмите скроет все другое содержимое панели сначала, затем покажите, что y ou "нажал".

Answer 4

Хорошие ответы выше, поэтому я не думаю, что здесь нужен другой конкретный ответ. Я хотел бы, как правило, деконструировать проблему, чтобы посмотреть, почему некоторые ответы были предоставлены. Похоже, у вас есть нужно два взаимодействия:

1. Пользователь может отобразить или скрыть DIV
   1. DIV может быть повторно (не) скрытый
2. Когда скрыть/показать действие предпринимается, все остальные DIVs скрыть

Это может помочь прояснить себе, что вы пытаетесь сделать, и облегчить решение проблемы.

Оригинальная реализация касается # 2, а также половины # 1.Когда мы смотрим на ответы, вы видите различные решения, которые касаются каждого отдельно (с более или менее рефакторингом из вашего исходного кода).

@ Предложение Amal Salibasic разрешает 2, затем 1, для вашего конкретного случая. @Rob Sedge, вероятно, будет более надежным, так как он также решает 1.1; если вы используете div также как триггер, как только вы его скроете, DIV не должен быть виден в браузере, чтобы щелкнуть и показать его снова. Таким образом, вы обычно должны использовать что-то другое, чтобы вызвать такой эффект (например, заголовок).

Как правило, попробуйте разбить отдельные этапы работы полного взаимодействия, подумайте, можно ли их сгруппировать (скрыть/показать целевое div двумя сторонами одной и той же монеты), а затем попытаться их решить.