如何让一个div只有一次点击？ [英] How to make only one div have the class clicked at a time?

问题描述

这很好，但它接受多于一个div的点击类。我只想在页面上点击一个div，点击''类。谁能帮我？

HTML：

 < div class = 点击 > 
< p>第1块< / p> 
< / div> 
< div class =contentstyle =display：block;> 
< p> 1Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum。< / 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 format 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>第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> 
 
 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 format 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>第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> 
 
 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 format humanitatis per seacula quarta decima et quinta decima。 
 Eodem modo typi，qui nunc nobis videntur parum clari，fiant sollemnes in futurum。< / p> 
< / div> 
  

JQuery：

 < （'click'，.clickable'）。on（'click'，function（）{
 if（$（this ）.hasClass（'clickable'））{
 $（'。content'）。hide（）; 
 $（this）.next（）。show（）; 
 $（this ）.removeClass（'clickable'）.addClass（'clicked'）; 
} 
 else {
 $（this）.next（）。hide（）; 
 $（这个）.removeClass（'clicked'）.addClass（'clickable'）; 
} 
}）; 
}）; 
  

解决方案

你走了。您可以简化代码：

  $（function（）{
 $（'。clicked，.clickable'） .on（'click'，function（）{
 //从每个元素中删除点击过的类。
 $（'。clicked'）。removeClass（'clicked'）; 
 
 //隐藏每个具有类内容的元素
 $（'。content'）。hide（）; 
 
 //在两个可用类之间切换，并在同一个
 （'。content'）。show（）; 
}）; $ b $显示兄弟元素的类内容
 $（this）.toggleClass（'clickable clicked'）。next b}）; 
  

演示

This works very fine, but it accepts more than one div with the class 'clicked'. I just want one div on the page with the class 'clicked'. Can anyone help me? Thank you in advance.

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');
    }
  });
});

解决方案

There you go. You can simplify your code:

$(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

这篇关于如何让一个div只有一次点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！