1

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

下面的代码大部分都有效......让我陷入循环的部分是在我的 h4 元素上添加/删除一类“活动”。当有人点击 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 ...

    $(文档).ready(函数(){
    $(".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");
        返回假；
        });
    });

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

谢谢！

编辑添加：我忘了描述我遇到的问题！使用当前的上述代码，当您单击单个 h4.accordLink “打开”然后“关闭”时，jquery 不会删除“活动”类。当您在一致块之间单击时效果很好，但在打开和关闭单个块时效果不佳。

4

2 回答 2

2

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

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

编辑

还有一种更清洁的方法：http: //jsfiddle.net/75Et5/4/

哪个使用.not($(this))而不是index()函数：

$(".accord-block").find(".active").not($(this)).removeClass("active");
于 2011-06-15T20:34:23.500 回答
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;
    });
于 2011-06-15T20:19:21.093 回答