Question

我有以下代码，我经历了很多问题，但我仍然无法让它运行。

我想使用toggle，但问题就是打开与此相关的所有课程。我想要的是只切换点击的课程

我已尝试过e.preventDefault，e.stopPropagation();和return false。但这些都不适合我。

注意我不知道使用上面提到的三个。我已经在结束使用它们而不是在开头。

＆＃13;

$(".read").click(function(e){
        //e.preventDefault();
        $(".expand").toggle();
		return false;
    });

＆＃13;

.expand{display:none;background:#000;color:white;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

＆＃13;

Answer 1

问题$(".expand")返回所有具有类.expand的元素，但您只需要获取一个元素。你可以这样做

$(".read").click(function(e){
  $(this).next('.expand').toggle();
  return false;
});

演示：http://jsbin.com/marale/1/edit?html,js,output

Answer 2

＆＃13;

$(".read").click(function(e){
        //e.preventDefault();
        $(this).next(".expand").toggle();
		return false;
    });

＆＃13;

.expand{display:none;background:#000;color:white;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

＆＃13;

Answer 3

你可以使用

$(".read").click(function(e){
    //e.preventDefault();
    $(".read").next(".expand").toggle();
    return false;
});

Answer 4

请检查以下代码：

$(".read").click(function(e){
        //e.preventDefault();
        $(this).next('.expand').toggle();
		return false;
    });

.expand{display:none;background:#000;color:white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

Answer 5

尝试这样的事情。这里next（）只是抓取下一个元素和$（this）引用当前点击的元素。

＆＃13;

$(".read").click(function(e){
        //e.preventDefault();
        $(this).next().toggleClass('expand');
		return false;
    });

＆＃13;

.expand{display:none;background:#000;color:white;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>
<p>Lorem Ipsum Text</p>
<div class="read">Read More</div>
<div class="expand">Lorem Ipsum text again !</div>

＆＃13;

jQuery：toggle类打开所有类

5 个答案: