ugrás a tartalomhoz

JavaScript hide and show div probléma

tumskin · 2014. Jún. 22. (V), 14.15
  1. <head>    
  2.   <meta charset="utf-8">    
  3.   <title>Hide and show</title>    
  4.   <style>    
  5.       
  6. .text_container {    
  7.   text-align: left;    
  8.   width: 500px;    
  9.   color: #000;    
  10.   background-color: #ddd;    
  11.   border: solid 1px #777;    
  12.   margin: 0 auto 10px;    
  13.   padding: 10px;    
  14.   cursor: pointer    
  15. }    
  16. .text_container div p {    
  17.   cursor: default !important;    
  18.   margin-bottom: 10px    
  19. }    
  20. .visible>div {    
  21.   display: block;    
  22.   font-size: 17px;    
  23. }    
  24. form,    
  25. .subscribe:hover>div,    
  26. .hidden>div {    
  27.   display: none    
  28. }    
  29. </style>    
  30. </head>    
  31.     
  32. <body>    
  33.     
  34.     <div class="text_container">    
  35.       <h2>Doboz</h2>    
  36.       <div>    
  37.         <p><a href="http://www.weblabor.hu" target="_blank">Home</a>   Leírás  </p>  
  38.       </div>    
  39.     </div>    
  40.     
  41.     
  42.   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>    
  43.   <script type="text/javascript">    
  44.     $(document).ready(function(){    
  45.       $('.text_container').addClass("hidden");    
  46.     
  47.       $('.text_container').click(function() {    
  48.         var $this = $(this);    
  49.         if ($this.hasClass("hidden")) {    
  50.           $(this).removeClass("hidden").addClass("visible");    
  51.         } else {    
  52.           $(this).removeClass("visible").addClass("hidden");    
  53.         }    
  54.       });    
  55.     });    
  56.   </script>    
  57. </body>    
  58. </html>  
Azt szeretném elérni, hogy ha a Doboz szövegre kattintok akkor nyissa ki és csukja be a box-ot! Remélem tud nekem valaki ebben segíteni! Mert jelenleg ha egy linket helyezek el benn akkor automatikusan becsukja! Köszi!
‹ Node app futtatása Grunt - al Javascript nem kapja meg a változó értékét amit PHP form-al küldök ›
 ■
1

Nem biztos, hogy szép, de

asam9 · 2014. Jún. 22. (V), 14.46
Nem biztos, hogy szép, de valami ilyesmi:
  1. $(document).ready(function () {  
  2.     var $tc = $('.text_container');  
  3.     $tc.addClass('hidden');  
  4.     $tc.on('click', function (e) {  
  5.         if ($(e.target).closest('a').length === 0) {  
  6.             $tc.toggleClass('hidden');  
  7.         }  
  8.     });  
  9. });  
Még esetleg azon spórolhatsz, hogy nem JS-sel adod rá a hidden class-t, hanem a HTML-be írod bele: <div class="text_container hidden"> ...
2

Pazar

tumskin · 2014. Jún. 22. (V), 14.55
Tökéletes nagyszerűen működik, köszönöm!
3

Mégse

tumskin · 2014. Jún. 22. (V), 15.27
Sajna nem jó mert így ha duplikálok egy új div-et akkor mindkettőt kinyitja és bezárja :(
4

Ha több elemre is akarod

asam9 · 2014. Jún. 22. (V), 18.49
Ha több elemre is akarod alkalmazni ezt, akkor viszont maradjon a this:
  1. $(this).toggleClass('hidden');  
5

Javascript alapok HTML

Hidvégi Gábor · 2014. Jún. 22. (V), 19.49
Javascript alapok
HTML alapok
CSS alapok
jquery alapok
6

google ?

tumskin · 2014. Jún. 23. (H), 16.21
$(document).ready(function(){
$('.text_container').addClass("hidden");

$(document).on('click', '.text_container h2', function() {
var $this = $(this).closest('.text_container');
if ($this.hasClass("hidden")) {
$this.removeClass("hidden").addClass("visible");
} else {
$this.removeClass("visible").addClass("hidden");
}
});
});


ezt kellett volna bemásolnod, nem a google keresőt ! de köszi