【问题标题】:Slidetoggle script doesnt toggleSlidetoggle 脚本不切换
【发布时间】:2014-02-11 15:31:39
【问题描述】:

我有一个不工作的切换幻灯片。花几个小时尝试/学习编辑和重写这个东西,但不知何故可见和不可见的滑动切换不起作用。

有人可以帮我编写js脚本吗:SEE THE FIDDLE

JS:

$('.header .ullie').hide();

  $('.header h2 a').click(function() {
  $(".header h2").not(this).next(".header .ullie").slideUp("slow");
  $(this).next(".header .ullie").slideToggle("slow");
  return false;
});

$('.header h3 a').click(function() {
  $(".header h3").not(this).next(".header .ullie").slideUp("slow");
  $(this).next(".header .ullie").slideToggle("slow");
  return false;
});

HTML:

<div id="foldercontents">
<ul class="ullie">
<li class="header">
<h2><a href="javascript:void(0);">testbutton</a></h2>
<ul class="ullie">
    <li class="foldercontent">
        <h3>title</h3>
        <ul class="ullie"><li>row 1</li></ul> 
 </li></ul>
 </li>

 <!-- second, duplicated from first -->
 <li class="header">
<h2><a href="javascript:void(0);">testbutton2</a></h2>
<ul class="ullie">
    <li class="foldercontent">
        <h3>title</h3>
        <ul class="ullie"><li>row 2</li></ul> 
 </li></ul>
 </li>

</ul>
</div>         

SEE THE FIDDLE *添加了 JQUERY 库

【问题讨论】:

  • fiddle 中添加了 jQuery,请大家帮忙看看

标签: javascript jquery toggle show-hide slidetoggle


【解决方案1】:

我假设您正在寻找something like this

$('ul li ul').hide();

$('.header > * > a, .foldercontent > * > a').click(function () {
    $(this).parent().siblings().slideToggle("slow");
});

您也可以使用margin:0; padding:0; 代替overflow:hidden 来防止跳跃,但这取决于您

另外请注意,您不需要 &lt;a&gt; 标签,如果您愿意,可以将它们应用到标题本身

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-12
    • 2012-05-17
    • 1970-01-01
    • 1970-01-01
    • 2012-05-25
    • 2021-11-06
    相关资源
    最近更新 更多