1

カスタムアコーディオンの実装に苦労しています。これは実際には、slideToggle の表示/非表示にすぎませんが、一度に 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です...

    $(document).ready(function(){
    $(".accord-container").hide();
    $("h4.accordLink").click(関数(){
        $(".accord-block").find(".active").removeClass("active");
        $(this).toggleClass("active").next().slideToggle("fast");
        $(this).parent().toggleClass("activeToggle").siblings()
.removeClass("activeToggle").children(".accord-container").hide("fast");
        false を返します。
        });
    });

どんな洞察も素晴らしいでしょう。CSS と ID の 1 つのセットを受け取るには「accord-block」が必要であり、このソリューションがほとんどそこにあると感じたときに 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

アコーディオン コンテナーの 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 に答える