2016-07-28 88 views
0

我有一个日历启动和运行,如果有比3更多的事件,我每天有一个更多的..按钮。点击此按钮后会出现一个下拉菜单并显示其他事件在那一天。jQuery有多个点击事件

它获取每个下拉列表的正确数据,但如果我点击触发点击按钮,他们都打开。

的Jquery:

<script> 
function deselect(e) { 
$('.pop').slideFadeToggle(function() { 
    e.removeClass('selected'); 
}); 
} 

$(function() { 
    $('[id^=contact]').on('click', function() { 
    if($(this).hasClass('selected')) { 
    deselect($(this)); 
     } else { 
    $(this).addClass('selected'); 
    $('.pop').slideFadeToggle(); 
    } 
    return false; 
    }); 

    $('.close').on('click', function() { 
    deselect($('#contact')); 
    return false; 
    }); 
}); 

$.fn.slideFadeToggle = function(easing, callback) { 
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing,  callback); 


}; 
</script> 

HTML + Django的

{% if forloop.counter|divisibleby:2 %} 
    <a href="/contact" id="contact{{  forloop.counter }}" class="popup"><small>More...<small></a> 
    <div class="messagepop pop"> 
{% endif %} 

<p class="alert" style="background- color: #{{ occurrence.event.category.color }}"> 
    <a title="{{ occurrence }}" href="{% url "calendar_occurrence_detail" pk=occurrence.event.pk year=occurrence.start.year month=occurrence.start.month day=occurrence.start.day %}">{{ occurrence|truncatechars:22 }}</a> 
</p> 
{%if forloop.last%} 
    </div> 
{% endif %} 

我不是最好的JQuery的所以这可能是简单的为他人,但我似乎无法弄清楚

提前致谢! JF

编辑 - 悬停DIV +数据以创建for循环

回答

1

你可以使用.next()选择方法单击处理程序上的当前点击按钮
$(this))。

只要改变

$('.pop').slideFadeToggle(); 

$(this).next().slideFadeToggle(); 
+0

心中已经已经试过,试过也是你们的,但它不能正常工作,单击它几次你可能会打包后得到它打开,但当你这样做可能是任何数量的弹出框,谢谢 –

+0

你可以编辑你的问题,张贴一部分呈现的HTML而不是Django模板。想要在小提琴中测试这个,这不应该很难弄清楚。 – DavidDomain

+0

https://jsfiddle.net/0naysjd3/在这里,我不能让它正常工作。生病继续努力,但其所有在那里.. 所以在第28/29日的前3个事件后,你看到其他事件后更多的这些应该在下拉链接不知道为什么它现在不工作 –