Question

我正在尝试触发单击标题时弹出的内容。这是功能：

    <script type="text/javascript">
    jQuery(document).ready(function($){

            $(".event-info").hide(); // make sure all content in event-info class is hidden

            $(".event-title").click(function(){
        // find the .event-info within the same div as .event-title is and slide to         show
            $(".event-info").hide();    $(this).parent().children(".event-        info").toggle("slide", {direction: "up"}, 500);           })

    });
    </script>

我的问题是它何时运行，它只运行一次！我点击标题，弹出内容，再次点击它然后关闭。但是，如果我想第三次点击它来弹出内容它不起作用。所以我要问的是，应该从这个函数中添加/删除什么才能使它能够按照我想要的方式弹出内容？

谢谢！

UPDATE！

这是HTML：

<html>
<div class="event-title"> Title that triggers content to appear is here </div>

<div class="event-info"> Content that appears is placed here</div>
</html>

*** UPDATE

好的，所以Aiias帮助我获得了它，所以我可以打开/关闭内容到无限，超越这个：

jQuery(document).ready(function($) {
  $(".event-info").hide();
  $(".event-title").click(function() {
    $(this).parent().children(".event-info").slideToggle(500);
  });
});

一切正常！多谢你们！很棒的帮助！

Answer 1

尝试

jQuery(document).ready(function($){

    $(".event-info").hide(); // make sure all content in event-info class is hidden

    $(".event-title").click(function(){
        $(this).siblings(".event-info").toggle({
            easing: "slide", 
            direction: "up", 
            duration: 500
        });           
    })

});

演示：Fiddle

更新：

$(".event-title").click(function(){
    val el = $(this).siblings(".event-info").toggle({
        easing: "slide", 
        direction: "up", 
        duration: 500
    });
    (".event-info").not(el).hide();
})

Answer 2

您不需要在点击处理程序中隐藏.event-info，因为切换处理此问题。尝试使用jQuery的slideToggle()：

<强>更新

jQuery(document).ready(function($) {
  $(".event-info").hide();
  $(".event-title").click(function() {
    var eventInfo = $(this).parent().children(".event-info");
    $('.event-info').not(eventInfo).slideUp();
    eventInfo.slideToggle();
  });
});

查看此工作已更新 jsFiddle演示http://jsfiddle.net/9meXY/1/

这个JQuery函数只触发一次。怎么了？

2 个答案: