首页 文章

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

提问于
浏览 次
1

我正在努力实施定制手风琴 . 它实际上只是一个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不会删除“活动”类 . 在单元格块之间单击时，它可以很好地工作，但在打开和关闭单个块时则不行 .

jquery accordion slidetoggle siblings

2 回答

  • 2

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

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

    EDIT

    并采用一种稍微简洁的方式：http://jsfiddle.net/75Et5/4/

    其中使用 .not($(this)) 而不是 index() 函数：

    $(".accord-block").find(".active").not($(this)).removeClass("active");
    回复于
  • 0

    有一个hack允许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;
    });
    回复于

相关问题