如何使一次只点击一个 div 类？ [复制]答案

【问题标题】：How to make only one div have the class clicked at a time? [duplicate]如何使一次只点击一个 div 类？ [复制]
【发布时间】：2014-10-08 02:29:20
【问题描述】：

这很好用，但它接受多个 div 并带有“clicked”类。我只希望页面上有一个“点击”类的 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');
    }
  });
});

【问题讨论】：

$('.clicked').removeClass('clicked') - 这将从其他 div 中删除该类。在将类设置为单击的 div 之前调用它。

标签： jquery html css

【解决方案1】：

在您的点击处理程序中：

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

【讨论】：

【解决方案2】：

你去。您可以简化代码：

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

【讨论】：

【解决方案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');
        }
    });
});

【讨论】：

【解决方案4】：

我已经在 3 小时前回答了你这个问题：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');
    }
});

【讨论】：

非常感谢你，但我想用“clicked”类的第一个 div 加载我的页面，它似乎不起作用..您的代码没有改变可点击/点击的类div 元素...