Question

嘿伙计们，我有一个简单的问题（希望很简单）。我创造了一种手风琴，但我需要点击按钮，向下滑动内容，否则如果再次单击按钮向上滑动内容，请在下面找到我到目前为止所做的事情。感谢您的帮助。

    $('#experiences').click(function () {
        var cb = function () {
            $('#experiences').addClass('active');
            $('#hiddenExperiences').slideDown();
            $('#addExperiences').fadeIn();
            return false;
        }
        closeFilters(cb);
        return false;
    });

    $('.btn-close').click(function () {
        var cb = function () {
            return false;
        };
        closeFilters(cb);
        return false;
    });

   function closeFilters(callbackFunc) {
     $(".active").removeClass("active");
     $(".add-filters").fadeOut(250);
     $(".hidden-filters").slideUp("slow", callbackFunc);
   }

<div class="heading" id="experiences">
                        <p><a href="#">Experiences</a></p>                   
                    </div><!--heading-->
                  <div class="filter">
                    <div class="hidden-filters" id="hiddenExperiences">
                        <p>Filtering by:</p>
                        <ul class="curr-filter"></ul>
                    </div><!-- hidden-filters -->
                    <div class="add-filters extra-width" id="addExperiences">
                        <div class="inner">
                            <a href="#" class="btn-close"></a>
                            <h4 class="title-filtery">Filtery By:</h4>

                            <div class="btn-holder clearfix">                               
                                <input type="button" class="btn-update" value="" />
                            </div>
                      </div>
                    </div><!-- filters -->
                </div><!-- filter -->

Answer 1

请参阅此方法 http://api.jquery.com/slideToggle/ 而这个事件 http://api.jquery.com/toggle-event/

Answer 2

您可以在Javascript onClick按钮上执行此操作：

function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == "inline") {
            e.style.display = 'none';
        }
        else if(e.style.display == "none") {
            e.style.display = "inline";
        }
    }

Answer 3

看起来您正在将.active类添加到id = experience

的所有元素中

$('#experiences').addClass('active');

你需要找到被点击的元素并通过它。

var tgt;
    $('#experiences').click(function (event) {
        tgt = $(event.target);
        var cb = function () {
            $(tgt).addClass('active');
            $('#hiddenExperiences').slideDown();
            $('#addExperiences').fadeIn();
            return false;
        }
        closeFilters(cb);
        return false;
    });

我不确定你的扩展是如何工作的，但那是你需要看的地方。

Answer 4

我用过这是我正在做的另一个项目，可能会有一些帮助

JS：

$('.container .ui-widget-header').click(function(){$(this).parent().children('.ui-widget-content').slideToggle()});

HTML：

<div class="container">
    <div class="ui-widget-header">Title</div>
    <div class="ui-widget-content">Content</div>
</div>
<div class="container">
    <div class="ui-widget-header">Title2</div>
    <div class="ui-widget-content">Content2</div>
</div>

需要帮助jQuery单击功能

4 个答案: