0

我有两个列表，我希望它们的功能类似于手风琴，当单击指定的元素时，指定的列表被隐藏，再次单击它会切换到显示。

的HTML：

    <ul class="acc" id="acc">
            <li>
                    <h3 class="slide">CATEGORIES</h3>
                    <div class="acc-section">
                    <div class="acc-content view">

                    <ul>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                    </ul>
            </div>
            </div>
            </li>

            <li>
                    <h3 class="slide2">CATEGORIES</h3>
                    <div class="acc-section">
                    <div class="acc-content view2">

                    <ul>

                   <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>

</ul>
            </div>
            </div>
            </li>
    </ul>

我已经使用以下代码为这两个列表完成了此操作：

$(document).ready(function() { 
  $('h3.slide').toggle(function() { 
    $('div.view').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $('div.view').fadeIn('slow'); 
            return false; 
    }); 
    $('h3.slide2').toggle(function() { 
    $('div.view2').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $('div.view2').fadeIn('slow'); 
            return false; 
    }); 
});

我的问题是它不是“动态的”，如果我将来要添加另一个列表，那么我也必须使用上面的代码。我希望能够只使用一小段代码，并为可点击元素和显示/隐藏元素重用相同的两个类名。我尝试使用以下代码完成此操作，但无法使其正常工作：

$(document).ready(function() { 
  $('h3.slide').toggle(function() { 
    $(this).siblings('div.view').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $(this).siblings('div.view').fadeIn('slow'); 
            return false; 
    }); 
});

有小费吗？

4

3 回答 3

0

要将事件应用于在 DOM 初始加载后需要加载的元素，请尝试使用 jQuery on() 函数。就像是：

$(function(){
  $('h3.slide').on('toggle', function() { 
    $('div.view').fadeOut('slow');
    return false; 
    }, 
      function() { 
      $('div.view').fadeIn('slow'); 
      return false; 
  }); 
  $('h3.slide2').on('toggle', function() { 
    $('div.view2').fadeOut('slow');
    return false; 
    }, 
      function() { 
      $('div.view2').fadeIn('slow'); 
      return false;
  }); 
});

希望有帮助。

见：http ://api.jquery.com/on/

于 2012-06-25T15:53:30.860 回答
0

您可以在这里使用 jquery "closest" 而不是兄弟姐妹。http://api.jquery.com/closest/

例如：

$(this).closest('div.view').fadeOut('slow');

如果这不适合您的需求，请发布您的 CSS，我可以为您提供更好的帮助。

于 2012-06-25T15:54:05.460 回答
0

感谢您的努力，但我能够使用 .slideToggle 解决这个问题：http: //api.jquery.com/slideToggle/

于 2012-06-26T09:45:40.830 回答