0

#fonte {
  display: block;
  width: 200px;
  height: 200px;
  outline: dotted;
  }

#conteudo {
  position: absolute;
  top: 15px;
  left: 210px;
  display: block;
  width: 200px;
  height: 200px;
  outline: dotted;
  }

.source li {
  display: block;
  height: 35px;
  outline: dotted;
  padding: 5px
  }


.item li {
  width: 36px;
  height: 36px;
  display: block;
  outline: dotted;
  padding: 5px;
  float: left;
  }
<div id="fonte">
  <ul class="source">
    <li> EMPRESA 1 </li>
    <li> EMPRESA 2 </li>
    <li> EMPRESA 3 </li>
  </ul>
</div>

<div id="conteudo">
  <ul class="item" id=emp1>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
  </ul>
  
    <ul class="item" id=emp2>
    <li> 1 </li>
    <li> 2 </li>
  </ul>
  
      <ul class="item" id=emp3>
    <li> 1 </li>
    <li> 2 </li>
  </ul>

</div>

1
  • Conseguiste resolver esta pergunta?
    – Sergio
    Commented 5/08/2015 às 22:39

4 Respostas 4

1

A maneira mais correta de fazer isso é usando uma classe de CSS.
E neste caso simples nem é preciso jQuery.

Podes iterar esses elementos e adicionar-lhes um oscultador de eventos. Na altura de iterar os elementos é importante guardar o index desse elemento, pois a cada #fonte li corresponde um ul.item. Daí ter usado var index = j; no exemplo em baixo. Assim, criando um novo escopo, guardo esse index para mais tarde ser usado.

Mudanças no CSS:

#conteudo ul {
    position: absolute; /* opcional */
    top: 0px; /* opcional */
    transition: opacity .8s;
    opacity: 0;
}
.open {
    opacity: 1 !important;
}

JavaScript:

(function () { // criar um escopo próprio para não exportar variáveis para o espaço global
    var fontes = document.querySelectorAll('#fonte .source li');
    var conteudos = document.querySelectorAll('ul.item');
    for (var j = 0; j < fontes.length; j++) { // percorrer as fontes 
        (function () { // criar novo escopo para guardar em memória as variáveis declaradas aqui dentro
            var index = j; // para saber qual o index do elemento clicado
            fontes[j].addEventListener('click', function () {
                for (var i = 0; i < conteudos.length; i++) {
                    conteudos[i].classList.remove('open');
                }
                conteudos[index].classList.add('open'); 
            });
        })();
    }
})();

(function () {
    var fontes = document.querySelectorAll('#fonte .source li');
    var conteudos = document.querySelectorAll('ul.item');
    for (var j = 0; j < fontes.length; j++) {
        (function () {
            var index = j;
            fontes[j].addEventListener('click', function () {
                for (var i = 0; i < conteudos.length; i++) {
                    conteudos[i].classList.remove('open');
                }
                conteudos[index].classList.add('open');
            });

        })();
    }



})()
#fonte {
  display: block;
  width: 200px;
  height: 200px;
  outline: dotted;
}
#conteudo {
  position: absolute;
  top: 15px;
  left: 210px;
  display: block;
  width: 200px;
  height: 200px;
  outline: dotted;
}
.source li {
  display: block;
  height: 35px;
  outline: dotted;
  padding: 5px
}
.item li {
  width: 36px;
  height: 36px;
  display: block;
  outline: dotted;
  padding: 5px;
  float: left;
}
#conteudo ul {
  position: absolute;
  top: 0px;
  transition: opacity .8s;
  opacity: 0;
}
.open {
  opacity: 1 !important;
}
<div id="fonte">
    <ul class="source">
        <li>EMPRESA 1</li>
        <li>EMPRESA 2</li>
        <li>EMPRESA 3</li>
    </ul>
</div>
<div id="conteudo">
    <ul class="item" id=emp1>
        <li>E1, li 1</li>
        <li>E1, li 2</li>
        <li>E1, li 3</li>
    </ul>
    <ul class="item" id=emp2>
        <li>E2 li 1</li>
        <li>E2, li 2</li>
    </ul>
    <ul class="item" id=emp3>
        <li>E3, li 1</li>
        <li>E3, li 2</li>
    </ul>
</div>

jsFiddle: http://jsfiddle.net/m5rktbn3/

11
  • Obrigado Sergio, ajudou muito... só tem um problema agora... nessa mesma página tem um campo de pesquisa que agora não funciona mais. Commented 19/07/2015 às 20:10
  • @RafaelBitencourt não estou a ver de que maneira o meu código pode influênciar outras partes da página... podes usar o meu jsFiddle e adptar até conseguires mostrar esse problema?
    – Sergio
    Commented 19/07/2015 às 20:16
  • Fiz a atualização... Se puder dar uma olhada agradeço. Commented 19/07/2015 às 21:11
  • @RafaelBitencourt fizeste atualização onde?
    – Sergio
    Commented 19/07/2015 às 21:14
0

Você pode simplesmente criar uma função do tipo

function esconderDiv(qual) {
    document.getElementById(qual).style.visibility = "hidden";
}

E chama-la com um onclick, diretamente

<div id="fonte">
  <ul class="source">
    <li onclick="esconderDiv('fonte')"> EMPRESA 1 </li>
    <li> EMPRESA 2 </li>
    <li> EMPRESA 3 </li>
  </ul>
</div>
0

Com jQuery:

var lista = $("#conteudo ul");

lista.click(function() {
    var indiceDoItem = lista.index(this);

    // Oculta ou mostra a empresa correspondente.
    $(".source li").eq(indiceDoItem).toogle();
});
0

Podes fazer isso utilizando o slideToggle() do jQuery.
Por exemplo:

$(document).ready(function(){
    $("#toggle").click(function(){
        $(".mostrar").slideToggle();
    });

});
.mostrar{
    display: none;
    border: 1px solid #000;
    font-size: 75px;
    width: 200px;
    height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button id="toggle">Mostrar</button>
<div class="mostrar">Olá!</div>

Aqui tens também um exemplo no jsFiddle com o código da tua pergunta, que irá fazer com que apenas as <li> que têm o número 1, número 2, ou número 3 sejam apresentadas na caixinha do lado direito ► http://jsfiddle.net/aqbq7u4a/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .