Question

我在jQuery中使用javascript的技巧只能扩展到＆＃34; cut＆amp; paste＆＃34; -coding，我希望得到一些帮助A）让这个简单的手风琴正常工作B）如果可能的话清理一下。也许每个H3等都不需要上课。

单击任何H3以展开带有文本的相应div时，将打开所有这些div。我当然只希望他们一次打开一个。

这是非工作的codepen： http://codepen.io/tuleby/pen/ijqHL

HTML：

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="workposts">
            <h3 class="toggle-trigger">2014-06-05<span>Heading A</span></h3>
            <div class="toggle-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                </p>
            </div>

            <h3 class="toggle-trigger">2014-06-04<span>Heading B</span></h3>
            <div class="toggle-content">
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                </p>
            </div>

            <h3 class="toggle-trigger">2014-05-19<span>Heading C</span></h3>
            <div class="toggle-content">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam
                </p>
            </div>

            <h3 class="toggle-trigger">2014-05-19<span>Heading D</span></h3>
            <div class="toggle-content">
                <p>Lquis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit </p>
                </p>
            </div>

        </div>
    </body>
</html>

jQuery的：

jQuery(document).ready(function($) { 
    $('.workposts').each(function(){
        $(this).find('.toggle-content').hide();
    });

    $('.workposts h3.toggle-trigger').click(function(){
        var el = $(this), parent = el.closest('.workposts');

        if( el.hasClass('active') )
        {
            parent.find('.toggle-content').slideToggle();
            el.removeClass('active');
        }
        else
        {
            parent.find('.toggle-content').slideToggle();
            el.addClass('active');
        }
        return false;
    });
});

Answer 1

您对父元素的使用似乎是问题

jQuery(function ($) {
    $('.workposts .toggle-content').hide();

    $('.workposts h3.toggle-trigger').click(function () {
        var el = $(this);

        el.toggleClass('active');
        el.next('.toggle-content').slideToggle();
        return false;
    });

});

演示：Fiddle

Answer 2

您可以像这样使用Accordion ......

$(function() {
    $( ".workposts" ).accordion();
  });

包含Jquery UI库

<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

我也更新了您的CodePen。

一个简单的jQuery手风琴无法正常工作，需要帮助

2 个答案:

一个简单的jQuery手风琴无法正常工作，需要帮​​助

2 个答案:

一个简单的jQuery手风琴无法正常工作，需要帮助