JavaScript中的自定义手风琴脚本

-2

我想做一个手风琴风格的向下滚动，但是当我点击“标题1”（例如）时，它会向下滚动然后备份。我需要让它滚动下来，并且只有当我再次单击它时（或者当我单击不同的标题时）才会滚动。另外，当我的页面加载时，所有标题都向下滚动，这是我不想要的。我能做些什么来解决这个问题？JavaScript中的自定义手风琴脚本

<style> 
    .accord-content { display: none; } 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".accordion .accord-header").click(function() { 
      if($(this).next("div").is(":visible")){ 
       $(this).next("div").slideUp("slow"); 
      } else { 
       $(".accordion .accord-content").slideUp("slow"); 
       $(this).next("div").slideToggle("slow"); 
      } 
     }); 
    }); 
</script> 
<div class="accordion"> 
    <div class="accord-header">Header 1</div> 
    <div class="accord-content">Link 1</div> 
    <div class="accord-header">Header 2</div> 
    <div class="accord-content">Link 2</div> 
</div>

来源

2013-08-16 user2690826

请花更多的时间来写你的问题。您的帖子中有许多拼写和格式错误。如果你不想花几分钟时间来回顾你自己写的内容，为什么我需要花几分钟时间来弄清楚它出了什么问题？ – zzzzBov

您在CSS中错误地引用了您的accord-content类。删除“＃”

.accord-content { display: none; }

不知道我理解这个问题的休息，一切似乎是工作，你形容的，除非我误解你想要的行为。

Codepen例如：http://cdpn.io/FeKyz

来源

2013-08-16 22:12:50 kunalbhat

好吧，我看到当我删除了“＃”第二个问题已被修复，但我仍然有第一个问题：当我点击一个头上下滚动快速，我需要它向下滚动并停止，直到我再次点击 – user2690826

@ user2690826与你的代码，它不应该这样做，你有脚本包括两次？ – epascarello

thaaaaaaaanks兄弟，它解决了，我把它包含在结构中（for）哈哈;） – user2690826

尝试两种不同的行为创建两个不同的功能，然后使用绑定和取消绑定。

function slideAccordianDown() { 
    $(this).next("div").slideDown("slow"); 
    $(this).unbind("click"); 
    $(this).bind("click", slideAccordianUp); 
}; 

function slideAccordianUp() { 
    $(this).next("div").slideUp("slow"); 
    $(this).unbind("click"); 
    $(this).bind("click", slideAccordianDown); 
}; 

$(document).ready(function() { 
    $(".accordion .accord-header").click(slideAccordianDown); 
});

这样做将删除功能，向下滑动并停止它，然后绑定functinon将其滑回备份。

来源

2013-08-17 00:27:19

JavaScript中的自定义手风琴脚本

回答

相关问题