如何讓一個div單次點擊一次？

Question

這很有效，但它可以接受多個「點擊」類的div。我只想在頁面上點擊一個div，點擊''類。誰能幫我？先謝謝你。

HTML：

<div class="clicked"> 
    <p>Block 1</p> 
</div> 
<div class="content" style="display:block;"> 
    <p>1Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.<br/><br/> 
    Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. 
    Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 
</div> 
<div class="clickable"> 
    <p>Block 2</p> 
</div> 
<div class="content"> 
    <p>2Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.<br/><br/> 
    Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. 
    Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 
</div> 
<div class="clickable"> 
    <p>Block 3</p> 
</div> 
<div class="content"> 
    <p>3Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.<br/><br/> 
    Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. 
    Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 
</div> 

JQuery的：

$(window).load(function() { 
    $('.clicked, .clickable').on('click', function(){ 
    if ($(this).hasClass('clickable')){ 
     $('.content').hide(); 
     $(this).next().show(); 
     $(this).removeClass('clickable').addClass('clicked'); 
    } 
    else { 
     $(this).next().hide(); 
     $(this).removeClass('clicked').addClass('clickable'); 
    } 
    }); 
}); 

Answer 1

你去那裏。您可以簡化代碼：

$(function() { 
    $('.clicked, .clickable').on('click', function() { 
     // Remove clicked class from every element. 
     $('.clicked').removeClass('clicked'); 

     // Hide every element with class content 
     $('.content').hide(); 

     // Toggle between the two available classes, and on the same 
     // go show the sibling element with class content. 
     $(this).toggleClass('clickable clicked').next('.content').show(); 
    }); 
}); 

Demo

Answer 2

在你的點擊處理程序：

$('.clicked').removeClass('clicked'); 
$(this).addClass('clicked'); 

Answer 3

似乎所有你需要做的是刪除所有 「點擊」。只需添加這樣一行：

$(window).load(function() { 
    $('.clicked, .clickable').on('click', function(){ 
     if ($(this).hasClass('clickable')){ 
      $('.content').hide(); 
      $(this).next().show(); 
      $('.clicked').removeClass('clicked'); // ADD THIS LINE 
      $(this).removeClass('clickable').addClass('clicked'); 
     } else { 
      $(this).next().hide(); 
      $(this).removeClass('clicked').addClass('clickable'); 
     } 
    }); 
}); 

Answer 4

我對你們喜歡4小時前回答了這個問題：d https://stackoverflow.com/a/26239480/3637090

http://jsfiddle.net/9owL9u37/

$('.clickable').on('click', function() { 
    $('.content').hide(); 
    if ($(this).hasClass('clicked')) { 
     $(this).removeClass('clicked'); 
    } else { 
     $(this).next().show(); 
     $(this).addClass('clicked'); 
    } 
});