Как переключать (jQuery) с помощью привязки

#javascript #jquery #toggle #jquery-events

#javascript #jquery #переключение #jquery-события

Вопрос:

У меня небольшая проблема с jQuery.

Ситуация:

У меня есть фрагмент кода jQuery, где я переключаю результаты.

JS-код:

 //Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return true; //Prevent the browser jump to the link anchor
});

Теперь я хочу открыть — переключить элемент в положение привязки с URL, например ( http://x.com/page.php#toggleItem2 )

Вопрос: Как прочитать toggleItem2 из URL и открыть именно этот раздел?

Дополнительные:

HTML-код:

 <div class="container">
    <h2 class="acc_trigger"><a href="#toggle1">Item1</a></h2>
    <div class="acc_container">
        <div class="block">
            Inner Text in toggle 1
        </div>
    </div>

    <h2 class="acc_trigger"><a href="#toggle2">Item2</a></h2>
    <div class="acc_container">
        <div class="block">
            Inner Text in toggle 2
        </div>
    </div>


    <h2 class="acc_trigger"><a href="#toggle3">Item3</a></h2>
    <div class="acc_container">
        <div class="block">
            Inner Text in toggle 3
        </div>
    </div>

</div>

Я надеюсь, что проблема четко определена.

Ответ №1:

Вы должны указать свои div идентификаторы в соответствии с привязками, например

 <h2 class="acc_trigger"><a href="#toggle1">Item1</a></h2>
<div id="toggle1" class="acc_container">
    <div class="block">
        Inner Text in toggle 1
    </div>
</div>

Вы можете получить фрагмент документа из location объекта:

 document.location.hash

Тогда это просто (при условии, что все остальные контейнеры скрыты):

 $(document.location.hash).slideDown().prev().addClass('active');

1. Я пробовал этот код, но при обновлении страницы все элементы «закрыты» (переключены вверх)…

2. @human: Вы дали div идентификатор? Вы поместили код внутрь document.ready обработчика?

3. Это мое обновление вашего решения, и оно работает. $(document.location.hash).addClass(‘active’).next().show(); Спасибо.

4. @Human: Тогда, похоже, вы присвоили идентификатор h2 элементу вместо div . До тех пор, пока это работает для вас 😉

5. @Felix: У меня есть дополнительный вопрос… Как с этим справиться, когда в URL-адресе также есть другой параметр, такой как ( x.com/page.php?i=8#toggleItem2 ). Мой код в этом случае не работает :/

Ответ №2:

Попробуйте сам jquery переключать

http://api.jquery.com/toggle/

Ответ №3:

Это хранится в window.location.hash переменной.

Ответ №4:

Вы можете сделать что-то вроде этого:

http://jsfiddle.net/b6Znw/

Javascript:

 $().ready(function(){
    $('.acc_trigger a').click(function(){
        $(this).closest('.acc_trigger').next('.acc_container').toggle()
        return false;   
    })
})