Question

这个工作非常好，但它接受了多个带有“clicked”类的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

在您的点击处理程序中：

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

Answer 2

您需要做的就是从所有内容中删除“点击”。只需添加一行如下：

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

我已经在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');
    }
});

Answer 4

你去吧。您可以简化代码：

$(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一次点击这个类？

4 个答案: