Question

代码

  <ul>
    {% for item in lis %}
    <li>
      <div id="single-toggle">|Toggle|</div>
      <div class="visible-when-folded">
        <div class="name">{{ item.name }}</div>
        <div class="date">{{ item.date }}</div>
      </div>

      <div class="invisible-when-folded">
        <div class="about">{{ item.about }}</div>
        <div class="contact_info">{{ item.contact_info }}</div>
      </div>
    </li>
    {% endfor %}
  </ul>

示例输出代码

|切换| 彼得 24-04-1990 一个友善的人 0474657434
|切换| 玛莎 22-02-1984 一个惊人的加仑 0478695675
|切换| 威廉 1974年12月11日一个老人 0478995675

所需行为

每当您点击|Toggle| about（例如A friendly guy）时，我都希望如此和contact_info（例如0474657434）部分消失/重新出现。

尝试解决方案

$(function(){
  $("#single-toggle").click(
    function(){ $("div.invisible-when-folded").toggle(); } );
});

但不幸的是，这会切换列表中每个项目的字段，而不是仅点击我点击的项目。

修改

views.py

from django.shortcuts import render_to_response
from django.template import RequestContext

def toggle(request):
    lis = [{'name':'Peter', 'date':'24-04-1990', 'about':'A friendly guy',
            'contact_info':'0474657434' }, 
          {'name':'Martha', 'date':'22-02-1984', 'about':'An amazing gal', 
            'contact_info':'0478695675' },
          {'name':'William', 'date':'12-11-1974', 'about':'An oldie', 
            'contact_info':'0478995675' }]

    return render_to_response('page.html', {'lis':lis},
      context_instance=RequestContext(request))

Answer 1

您需要将当前对象作为context in the selector传递，以获取与事件源对象相关的元素。您还需要使用class instead of id或为id = single-toggle生成唯一ID ，因为html元素supposed具有唯一ID。

<强> Live Demo

我给了一个id为class =“single-toggle”的div

更改

$("div.invisible-when-folded").toggle();

要

$("div.invisible-when-folded", this).toggle();

你编码

$(function(){
  $("#single-toggle").click(
    function(){ $("div.invisible-when-folded", this).toggle(); } );
});

Answer 2

您需要将功能集中在点击的div中的div上...您需要使用的实际代码是：

$(function(){
  $("#single-toggle").click(
    function(){ $("div.invisible-when-folded", this).toggle(); } );
});

Jquery切换（可见/不可见）仅用于在模板生成的html列表中单击的项目

修改

2 个答案: