пользовательский jquery гармошка - добавление / удаление классов на якорях - PullRequest
Новая
       33

пользовательский jquery гармошка - добавление / удаление классов на якорях

1 голос
/ 16 июня 2011

Я борюсь с реализацией собственного аккордеона. Это действительно просто показ / скрытие слайд-тогл, но я хочу, чтобы одновременно открывалось только ОДИН тумблер, с добавлением и удалением jquery классов для дополнительного стиля.

Приведенный ниже код МОЖНО работает ... часть, которая бросает меня за цикл - это добавление / удаление класса "active" в моем элементе h4. Когда кто-то щелкает по H4, он должен получить класс «active», а все остальные элементы h4 в моем блоке удалят «active». Я пробовал это миллион способов, и я просто не могу понять это.

Вот пример моего 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 и идентификаторов, и я не хочу использовать пользовательский интерфейс Jquery, когда я чувствую, что это решение почти все.

Спасибо!

Изменить, чтобы добавить: я забыл описать проблему, с которой я столкнулся! В текущем коде выше, когда вы нажимаете один h4.accordLink «open», а затем «closed», jquery не удаляет класс «active». Он прекрасно работает, когда вы нажимаете между блоками аккордов, но не при открытии и закрытии одного блока.

Ответы [ 2 ]

2 голосов
/ 16 июня 2011

Посмотрев обновление, вот мое решение: 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 голосов
/ 16 июня 2011

Есть хак, чтобы разрешить отключение состояния ui для контейнеров аккордеона: 

$("#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;
    });
...