Question

我正在努力实施定制手风琴。它实际上只是一个slideToggle显示/隐藏，但我只希望一次打开一个切换，jquery添加和删除类以获得额外的样式。

以下代码MOSTLY正常工作......抛出循环的部分是在我的h4元素上添加/删除一类“active”。当有人点击H4时，它应该接收“活动”类，并且我的块中的所有其他h4元素将被“活动”删除。我已经尝试过这种方式，但我无法确定这一点。

以下是我的HTML示例...

    <div class="accord-block">
      <h4 class="accordLink"><a href="#">Title of box</a></h4>
      <div class="accord-container">
        <div class="accord-content">
          <p>Lorem ipsum content dolor sit amet desu</p>
        </div>
      </div>
    </div>

    <div class="accord-block">
      <h4 class="accordLink"><a href="#">Another title of another box</a></h4>
      <div class="accord-container">
        <div class="accord-content">
          <p>Lorem ipsum content dolor sit amet desu</p>
        </div>
      </div>
    </div>

这是我的jquery ......


    $(document).ready(function(){
    $(".accord-container").hide(); 
    $("h4.accordLink").click(function(){
        $(".accord-block").find(".active").removeClass("active");
        $(this).toggleClass("active").next().slideToggle("fast");
        $(this).parent().toggleClass("activeToggle").siblings()
.removeClass("activeToggle").children(".accord-container").hide("fast");
        return false;
        });
    });

任何见解都会很棒。我正在走这条路，因为我需要“accord-block”来接收一组CSS和ID，而且当我觉得这个解决方案是最终的时候我不想使用Jquery UI。

谢谢！

编辑添加：我忘了描述我遇到的问题！使用当前上面的代码，当您单击单个h4.accordLink“打开”然后“关闭”时，jquery不会删除“活动”类。在单元格块之间单击时，它可以很好地工作，但在打开和关闭单个块时则不行。

Answer 1

看过更新后，这是我的解决方案：http://jsfiddle.net/75Et5/3/

我已经使用index()函数来确定您所在的块，因此不会删除活动类，以便在关闭H4标记时正确切换。

修改

采用稍微简洁的方法：http://jsfiddle.net/75Et5/4/

使用.not($(this))代替index()函数：

$(".accord-block").find(".active").not($(this)).removeClass("active");

Answer 2

手风琴容器允许使用ui-state-disabled进行黑客攻击：

$("#myaccordion").accordion({
autoHeight: false,
navigation: true,
create: function(event,ui){ 
    $( "#container2" ).addClass("ui-state-disabled");
    $( "#container3" ).addClass("ui-state-disabled");
    $( "#container4" ).addClass("ui-state-disabled");
    $( "#container5" ).addClass("ui-state-disabled");
}
});  

    // Hack to implement the disabling functionnality

        var accordion = $( "#myaccordion" ).data("myaccordion");
        accordion._std_clickHandler = accordion._clickHandler;
        accordion._clickHandler = function( event, target ) {
        var clicked = $( event.currentTarget || target );
        if (! clicked.hasClass("ui-state-disabled"))
          this._std_clickHandler(event, target);
        };

然后，在容器中添加按钮以指示移动到下一个容器（并执行任何必要的验证）。例如 - 这是下一个按钮进行验证并打开下一个容器的js：

$('#NextLink1').click(function () {
        //verify uniqueness of username before proceeding.
        var regexVal = /^([a-zA-Z0-9]+)$/;
        if ($('#user_username').val() == "") {
            $('#usererrormsg').text("You must provide a user name");
            $('#usererrormsg').show();
        } else if ($('#company_name').val() == "") {
            $('#usererrormsg').text("You must provide a company name");
            $('#usererrormsg').show();
        } else if (regexVal.test($('#user_username').val())==false) {
            $('#usererrormsg').text("User names must be alpha-numeric only. No special characters.");
            $('#usererrormsg').show();
        } else if ($("#user_user_picture").val() && $("#user_user_picture").val().match(/(.png$)|(.jpg$)|(.jpeg$)|(.gif$)/i) == null )  {
            $('#usererrormsg').text("Pictures must be png, jpg, jpeg, or gif format.");
            $('#usererrormsg').show();      
        } else {
        //$.get('/users/isusernameunique?un='+$('#user_username').val(),function(data) {
            $.post('/users/isusernameunique', {
                'un': $('#user_username').val()
            },function(data) {
                //$('#uniqueuserresult').html(data);
                if(data.msg == "dupe") {
                    $('#usererrormsg').text("Someone stole your username! They must be unique. Please try again.");
                    $('#usererrormsg').show();
                    $('#user_username').focus();
                } else {
                    $('#usererrormsg').hide();
                    $( "#container2" ).removeClass("ui-state-disabled");                    
                    $('#container2h3').click();
                    $( "#container1" ).addClass("ui-state-disabled");
                }
            }, "json");         
        }

        //$('#companydetailsh3').click();
        return false;
    });

自定义jquery手风琴 - 在锚点上添加/删除类

2 个答案: