如何让一个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'); 
    } 
});