2

Tenho o seguinte código para mostrar e esconder conteúdo, mas só funciona uma vez. Quando clico novamente para esconder, nada acontece.

$(document).ready(function() {
    $('li[name=music]').off().on('click', function() {
        if ($(this).children().css('display', 'none')) {
            $(this).children().css('display', 'block');
        } else {
            $(this).children().css('display', 'none');
        };
    });
});

http://codepen.io/evemontalvao/pen/PZPpgM

1
  • showMusic() não esta definido, onde você declarou ela ? Commented 14/12/2015 às 19:54

6 Respostas 6

2
  <script type="text/javascript">

        function mostra() {
            if (document.getElementById('teste').style.display == 'block'){
                document.getElementById('teste').style.display = 'none';
            }else {document.getElementById('teste').style.display = 'block'}
        }

    </script>

Em 'teste' voce coloca o id da sua div , e no botao coloca :

onclick="mostra('teste')"
2

Analisando o seu código HTML, você pode simplesmente fazer:

$('li[name=music]').on('click', function () {
  $el = $(this).children('div');
  /*
  * Desta forma vc verifica se a div está visível
  * ao invés de if($(this).children().css('display','none'))
  * que sempre retornará verdadeiro
  */
  if($el.is(':visible')){ 
    $el.css('display','none');
  } else {
    $el.css('display','block');
  }
});

Outra sugestão, aproveitando que você está utilizando o framework Bootstrap, você pode colocar a classe hide na div e utilizar a função toggleClass, exemplo:

$('li[name=music]').on('click', function () {
  $(this).children('div').toggleClass('hide');
});

Outra dica seria trocar ID por Classes no CSS #music1, #music2, #music3 por .music.

CodePen

1
  • 1
    Só não esquece de explicar o erro no código do AP (sobre o if($(this).children().css('display','none')){). +1
    – Syzoth
    Commented 14/12/2015 às 20:07
0

Pra que isso tudo? use toggle()!

$('li[name=music]').click(function() {
  $(this).find('div').toggle();
});
#music1,
#music2,
#music3 {
  display: none;
  text-align: center;
  padding: 1%;
  text-transform: none;
  color: #bb5d6a;
}
ul.nav-pills li {
  background-color: #faf7ea;
  text-transform: uppercase;
}
ul.nav-pills li a {
  color: #bb5d6a;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.5em;
  border-bottom: 1px solid #fff;
}
.icon::before {
  display: inline-block;
  margin-right: .5em;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="col-md-4">
  <ul class="nav nav-pills nav-stacked">
    <li role="presentation" name="music"><a class="icon fa-play-circle-o" href="#musicas"> Lorem Ipsum</a>
      <div id="music1" name="mostra">

        teste
      </div>
    </li>
    <li role="presentation" name="music"><a class="icon fa-play-circle-o" href="#musicas"> Lorem Ipsum</a>
      <div id="music2">

        teste
      </div>
    </li>
    <li role="presentation" name="music"><a class="icon fa-play-circle-o" href="#musicas"> Lorem Ipsum</a>
      <div id="music3">
        teste
      </div>
    </li>
  </ul>
</div>

0

o toggle não seria suficiente?

$(document).ready(function () {
    $('li[name=music]').off().on('click', function () {
        $(this).toggle();
    }
}
0

Nesta linha if ($(this).children().css('display', 'none')) { essa verificação vai sempre dar verdadeiro. Isso porque esse método do jQuery retorna o próprio objeto, e objetos quando convertidos em booleanos dão true.

Nesse if deverias ter somente $(this).children().css('display') vai dar uma string, e depois comparar com block por exemplo...

Se o que pretendes é esconder e mostrar os elementos descendentes podes simplificar o código. Podes misturar CSS nisso que é melhor.

Algo assim:

CSS

.esconde > * {
  display: none;
}

JavaScript

$('li[name=music]').on('click', function () {
  this.classList.toggle('esconde');
});

exemplo: http://codepen.io/anon/pen/VevoOG

0

Tente:

$(document).ready(function() {
  $('li[name=music] a').on('click', function () {
    $(this).next().toggle(); 
  });
});

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 .