2

Como podem ver no exemplo a baixo, eu tenho um collapsible e na estrutura inicial tenho um botão/link (sinal de + do exemplo), eu gostaria de poder apertar esse botão e não ativar a função que expande o collapsible

https://jsfiddle.net/d5th7o6r/7/

$('.collapsible').collapsible(); 
function fazalgo () {
  console.log(":)");
}
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
          <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <ul class="collapsible">
          <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First
              <a onclick='fazalgo()' class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second
              <a onclick='fazalgo()' class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third
              <a  class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
        </ul>    

5
  • Se não for para expandir o collapse quando vc aperta o + o que vc quer que execute quando clica no +? Ficou confusa sua pergunda... Vc quer que cada + só expanda e recolha o seu próprio conteúdo, e não que ao clicar em um ele expanda e o outro recolha é isso?
    – hugocsl
    Commented 16/07/2018 às 12:33
  • não, no caso o botão + dispara outra função, q no meu problema seria pra addicionar o item em uma sacola de comprar.(vou tentar arrumar o codigo)
    – kcvventura
    Commented 16/07/2018 às 12:35
  • Cara então por que usar o componente de collapse para isso? Ou vc quer ter o collapse, mas quer que o btn + não abra o collapse e faça outra coisa?
    – hugocsl
    Commented 16/07/2018 às 12:38
  • isso, quero q o botão chame um função diferente, ele vai executa-la e não abrir o collapse, mas o resto do campo ainda abrirá o mesmo
    – kcvventura
    Commented 16/07/2018 às 12:44
  • Como assim o resto do campo ainda abrirá o mesmo? Vc quer que o botão abra o collapse sim ou não?
    – LeAndrade
    Commented 16/07/2018 às 13:33

3 Respostas 3

1

A resposta do Hugo já te atende, mas, deixo aqui uma solução somente com js:

$(".collapsible").collapsible();

$("a").on("click", function(e) {
  e.stopPropagation(); 
  console.log("Outra função aqui");
})
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<ul class="collapsible">
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First
           <a  class="secondary-content"><i class="material-icons">add</i></a>
         </div>
         <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
     <li>
         <div class="collapsible-header"><i class="material-icons">place</i>Second
            <a  class="secondary-content"><i class="material-icons">add</i></a>
         </div>
         <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
     <li>
         <div class="collapsible-header"><i class="material-icons">whatshot</i>Third
            <a  class="secondary-content"><i class="material-icons">add</i></a>
         </div>
         <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
 </ul>

6
  • Legal! é esse "stopPropagation(); " que corta a função do collapse? Eu tinha tentado isso com preventDefault mas não tinha dado certo rss
    – hugocsl
    Commented 16/07/2018 às 15:48
  • 1
    O stopPropagation é do jQuery e o preventDefault do Javascript, achei estranho tbm, não sei se tem a ver com o collapse, mas, o preventDefault não funcionou aqui comigo tbm, nem o return false, que praticamente são a mesma coisa.
    – LeAndrade
    Commented 16/07/2018 às 15:56
  • 1
    Eu comecei a estudar JS agora, mas já vou sempre ficar ligado nisso, vlw. Oum dúvida, eu não posso usar métodos do JS normal dentro de uma função jQuery?
    – hugocsl
    Commented 16/07/2018 às 16:00
  • 1
    Sua resposta me servil perfeitamenta, funcinou da forma como eu queria. Muito obrigado
    – kcvventura
    Commented 16/07/2018 às 16:32
  • @hugocsl pode sim cara, jQuery é Javascript com uma sintaxe mais simples, "quase" tudo dá para fazer apenas com jQuery, mas às vezes é necessário utilizar métodos do Javascript. Pose usar junto, sempre tomando cuidado em não misturar a sintaxe de uma com a outra.
    – LeAndrade
    Commented 16/07/2018 às 17:43
1

Para fazer isso vc precisa tira o ícone + de dentro da div .collapsible-header que é a responsável pela função do collapse. Assim vc desvincula o ícone + dessa função executada ao clicar na div .collapsible-header`.

Para alinhar o ícone precisei fazer um pequeno CSS para o + ficar alinhado a direita.

Repare que agora ao clicar + o collapse não acontece e assim vc pode construir sua função separadamente e sem afetar o comportamento do collapse original.

$('.collapsible').collapsible();
$(".mais").click(function(){
    console.log("+ clicado");
});
.collapsible .mais {
    padding: 1rem;
    position: absolute;
    right: 0;
  }
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
  <!--JavaScript at end of body for optimized loading-->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    
<ul class="collapsible">
  <li>
    <a  class="secondary-content mais" href="#"><i class="material-icons">add</i></a>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
      <a  class="secondary-content mais" href="#"><i class="material-icons">add</i></a>
    <div class="collapsible-header"><i class="material-icons">place</i>Second
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
      <a  class="secondary-content mais" href="#"><i class="material-icons">add</i></a>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third
    </div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>  

2
  • Obrigado, sua solução foi bem interessante.
    – kcvventura
    Commented 16/07/2018 às 13:56
  • @KlebersonVentura legal que gostou, essa foi a forma que eu encontrei de fazer desvinculando o + e o script dele do elemento collapse original. Mas as vezes alguém que entende mais de JS pode ter uma solução sem precisar desse artifício. Como eu não entendo muito fiz dessa forma rss, mas precisou de um pouco de CSS. Boa sorte ai com o projeto.
    – hugocsl
    Commented 16/07/2018 às 14:01
1

Resolvi desta forma, não tão elegante, fechando o collapse assim q usar a função

$('.collapsible').collapsible(); 
function fazalgo () {
  console.log(":)");
}
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
          <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <ul class="collapsible">
          <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First
              <a onclick="$('.collapsible').collapsible('open', '0');" class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second
              <a onclick="$('.collapsible').collapsible('open', '1');" class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third
              <a  onclick="$('.collapsible').collapsible('open', '2');" class="secondary-content"><i class="material-icons">add</i></a>
            </div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
          </li>
        </ul>    

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 .